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

Question

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

Answer 1

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

它.append()用于模拟动态加载的内容.然后在追加之后,它用于.find()查找图像,.load()并将加载处理程序附加到它们.

最后,它返回length图像的属性.然后在加载处理程序中,当图像完成加载时,长度递减.一旦它到达0,所有图像都被加载,并且代码在if()运行中.

示例: http ://jsfiddle.net/ehwyF/

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属性true.

放在此.find()之前和之后.load().

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