实现.html()函数的回调方法

通过JQuery的。html()函数我们可以非常方便地加载一段HTML到指定的元素中,例如给<div></div>中放入一组图片。问题是JQuery的。html()函数是同步的,如果我们想知道HTML被加载之后容器的高,例如获取容器的offsetHeight或scrollHeight属性的值,必须要等HTML元素中所有的内容都加载完毕后才能获取到真实的值,尤其是HTML中包含有image标签时。那如何才能实现。html()函数的回调方法呢?
 
对应的代码如下:
 
复制代码
 
var defer = Q.defer();
 
var realHtml = $(’#html-canvas’);
 
realHtml.html(html);
 
var contentImages = $(”#html-canvas img”);
 
var totalImages = contentImages.length;
 
var loadedImages = 0;
 
if (contentImages.length === 0) defer.resolve();
 
else {
 
    contentImages.each(function(){
 
        $(this)。on(’load’, function(){
 
            loadedImages++;
 
            if(loadedImages == totalImages)
 
            {
 
                defer.resolve();
 
            }
 
        });
 
    });
 
}
 
return defer.promise.then(function () {
 
    console.log(’all done.’);
 
});
 
复制代码
 
  首选通过JQuery选择器找到容易中已加入HTML的所有img元素,然后给所有img元素添加onLoad事件,并判断是否所有img元素的onLoad事件是否都已经触发(loadedImages == totalImages)。然后通过defer.resolve()来通知Q的promise已完成异步操作,然后在。then()函数中就可以继续下一步操作了。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64665.shtml

张贴在3