javascript dom加载顺序

[春花儿]

我有一个dom 该dom是通过js 加载到页面上的。 我想在确保这个dom 加载完成以后再执行一个js 插件 否则页面上会有错误，这个js插件会计算出一些错误 或者 不计算 针对这个dom。 问下大神们有什么什么方法。

var dom = '<div class="item">'+
                '<div class="item_description">'+
                '<div>'+
                '<a class="title">标题标题标题标题标题标题标题标题标题</a>'+
                '<a class="download"><i class="fa fa-download"></i></a>'+
                '</div>'+
                '</div>'+
                '<a class="imgbox"><img src="images/i_16.jpg" alt="" /></a>'+
                '</div>';

    var container = $(".wh-ifo-piclist");

我想在这段代码执行完毕后 ， 因为我的图片列表有可能很多 也有可能很少。再执行

$('.wh-ifo-piclist').tjGallery({
      selector: '.item',
      margin: 10
    });

这是一个针对dom 里面img 进行操作的插件
尝试过ready() 和 window.onload(); 但是我本身这个dom 加载的时间也是在ready 和 onload 以后进行操作 所以不能实现。
问下大神们有什么什么方法。

[天际的海浪]

$('.wh-ifo-piclist').tjGallery()放container.append(dom);之后。并可以适当的设置setTimeout延时

var container = $(".wh-ifo-piclist");
container.append(dom);
setTimeout(function(){
	$('.wh-ifo-piclist').tjGallery({
      selector: '.item',
      margin: 10
    });
}, 500);

[clark_kidd]

我觉得，你不应该使用window.onload()，而应该在加载完所有的dom之后，回调tjGallery进行初始化。

function initGallery(){
$('.wh-ifo-piclist').tjGallery({
      selector: '.item',
      margin: 10
    });
}
var dom = '<div class="item">...';
var container = $(".wh-ifo-piclist");
container.append(dom);
initGallery()

[当作看不见]

把你的js 放在dom 后面执行就可以了 ,onload 并不符合当前状况,onload 是指 静态dom ,写在HTML 里面的, 而你的dom 是js 生成的,所以简单的把 后面要执行的放在 生成dom 后面执行就行了,

[斯洛文尼亚旅游]

添加到dom前给所有img加onload，onerror事件计算所有图片加载完毕后再执行

 
//注意转为jquery对象
   var dom =$( '<div class="item">' +
                  '<div class="item_description">' +
                  '<div>' +
                  '<a class="title">标题标题标题标题标题标题标题标题标题</a>' +
                  '<a class="download"><i class="fa fa-download"></i></a>' +
                  '</div>' +
                  '</div>' +
                  '<a class="imgbox"><img src="images/i_16.jpg" alt="" /></a>' +
                  '</div>');
//////////////////////////////////
    var img = dom.find('img'), l = img.length;
    img.bind({
        load: function () {
            l--;
            if (l == 0) $('.wh-ifo-piclist').tjGallery({ selector: '.item', margin: 10 });
        }, error: function () {
            l--;
            if (l == 0) $('.wh-ifo-piclist').tjGallery({ selector: '.item', margin: 10 });
        }
    })
//////////////////////////////////
    var container = $(".wh-ifo-piclist");
    container.append(dom);

Web开发学习资料推荐
JavaScript apply与call的用法
javascript客户端图片预览

[春花儿]

引用 4 楼 showbo 的回复:

添加到dom前给所有img加onload，onerror事件计算所有图片加载完毕后再执行

 
//注意转为jquery对象
   var dom =$( '<div class="item">' +
                  '<div class="item_description">' +
                  '<div>' +
                  '<a class="title">标题标题标题标题标题标题标题标题标题</a>' +
                  '<a class="download"><i class="fa fa-download"></i></a>' +
                  '</div>' +
                  '</div>' +
                  '<a class="imgbox"><img src="images/i_16.jpg" alt="" /></a>' +
                  '</div>');
//////////////////////////////////
    var img = dom.find('img'), l = img.length;
    img.bind({
        load: function () {
            l--;
            if (l == 0) $('.wh-ifo-piclist').tjGallery({ selector: '.item', margin: 10 });
        }, error: function () {
            l--;
            if (l == 0) $('.wh-ifo-piclist').tjGallery({ selector: '.item', margin: 10 });
        }
    })
//////////////////////////////////
    var container = $(".wh-ifo-piclist");
    container.append(dom);

Web开发学习资料推荐 JavaScript apply与call的用法 javascript客户端图片预览

这个方法很管用。大神给分