当事件已完全加载时将事件分配给div

当包含div的所有元素已完全加载时，是否可以将事件分配给div以触发？例如。如果div包含图像，则在图像完全加载时在div上触发事件。我正在使用jQuery。当事件已完全加载时将事件分配给div

2010-11-12 amateur

不知道你是如何动态地添加内容，但这个例子应该说明它如何工作。

它使用.append()来模拟你的动态加载的内容，然后将追加后，它使用.find()找到图像，到负载处理程序附加到他们。

最后，它返回length图像的属性。然后在加载处理程序中，随着图像加载完成，长度递减。一旦达到0，将加载所有图像，并运行if()中的代码。

var len = $('#mydiv').append('<img src = "http://dummyimage.com/150x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/160x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/170x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/180x90/f00/fff.png&text=my+image" />') 
    .find('img') 
    .load(function() { 
     if(--len === 0) { 
      alert('all are loaded'); 
     } 
    }).length;

这种方式，仅基于在#mydiv图像中的代码运行。

如果在那里，是不是动态的，因此不应该得到事件的任何图像，你应该能够添加.not()过滤器，以排除那些在complete属性是true。

将此放在.find()之后和之前。

.not(function(){return this.complete})

来源

2010-11-12 00:50:01 user113716

这是我所遇到的最好的方法+1 – Blowsie 2011-04-07 11:30:34

很难检查它只有一个div，但我可以建议使用$(window).load()来检查是否所有的图像已加载？

更新：如果您使用ajax，然后使用回调查看json何时加载，然后附加$（“div＃id img”）。load（）以查看何时加载所有图像。唯一的问题是我注意到图像被缓存的时候，加载器不会被触发。 :(

来源

2010-11-12 00:32:59

我加载股利动态所以不能使用$（窗口）.load（）的内容。应该说在我原来的问题.. – amateur 2010-11-12 00:38:59

看到我的编辑很快 – 2010-11-12 00:39:38

如果它只是一个像你想等待，你可以使用Ajax加载图像，然后在Ajax回调触发事件。

来源

2010-11-12 00:35:19 generalhenry

抓在div所有图像的onload事件中，有通过提高1一些全局计数器如果计数器等于在div图像的量......所有图像加载完毕。应该很简单，使用jQuery。

这只适用于图像，但其他元素没有onload事件。

来源

2010-11-12 01:16:31

为了增加暗影精灵的想法，你可以试试下面的代码：

var totalImages = $(".yourImageClass").length; 
var loadedImages = 0; 
$(".yourImageClass").bind("onload", function() { 
    loadedImages++; 
    if (loadedImages == totalImages) { 
     //all images have loaded - bind event to DIV now 
     $("#yourDiv").bind(eventType, function() { 
      //code to attach 
     }); 
    } 
});

来源

2010-11-12 04:24:34

当事件已完全加载时将事件分配给div

回答

相关问题