Question

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

Answer 1

不确定您是如何动态添加内容的，但此示例应说明它是如何工作的。

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

最后，它返回图像的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中的图像运行。

如果其中的任何图片不是动态的，因此不应该获得.load()事件，您应该能够添加.not()过滤器以排除complete } property是true。

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

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

Answer 2

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

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

Answer 3

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

Answer 4

要添加Shadow Wizard的想法，您可以尝试以下代码：

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 
        });
    }
});

Answer 5

捕获div中所有图像的onload事件，在那里将一些全局计数器加1。如果该计数器等于div中的图像数量...所有图像都完成加载。使用jQuery应该很简单。

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

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

5 个答案: