是否有类似于`$(window).load();`用于在新插入的Ajax内容完成加载后执行函数？

Question

通过做一些简单的事情来制作ajax请求之后$(element).load(url, callback);,页面上会有包含图像等的新内容.

$(window).load(callback)在新内容加载完成后,有没有办法做类似的事情？

$(window).load();当页面是新鲜的时,可以很好地工作,这样你就可以显示一个加载动画,直到所有内容都被加载,但是在$(window).load()已经被触发后加载内容时似乎缺少像这样简单的东西.

编辑6/6/12 11:55 pm:我想每个人都误解了我的问题.让我解释一下:

当您第一次加载页面时,您可以使用jQuery来利用这两个事件:$(document).ready();和$(window).load();.第一个在DOM准备好时触发,第二个在内容完成加载时触发(图像等).在使用jQuery的.load()方法更新页面后,我完全清楚我可以在Ajax完成后传递一个回调来执行.

那不是我想要的.我希望在新内容加载完成后执行一个函数,类似于$(window).load();页面初始内容加载完成后的触发.

那有意义吗？我们怎样才能创建一个事件类似$(window).load();的Ajax'ed内容加载完成(后做的东西不是在HTML已经插入刚过)？

Answer 1

根据 jQuery：

当元素和所有子元素完全加载时，加载事件将发送到该元素。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和窗口对象。

因此，在 DOM 更新后（例如，使用 Ajax 内容），我为所有新插入的图像上的“加载”事件设置侦听器：

function when_images_loaded($img_container, callback) { // do callback when images in $img_container (jQuery object) are loaded. Only works when ALL images in $img_container are newly inserted images and this function is called immediately after images are inserted into the target.
    var _imgs = $img_container.find('img'),
        img_length = _imgs.length,
        img_load_cntr = 0;

    if (img_length) { //if the $img_container contains new images.
        _imgs.on('load', function() { //then we avoid the callback until images are loaded
            img_load_cntr++;
            if (img_load_cntr == img_length) {
                callback();
            }
        });
    }
    else { //otherwise just do the main callback action if there's no images in $img_container.
        callback();
    }
}

这对于允许内容在图像准备好之前保持隐藏非常有用。如果您有将显示为背景图像的背景图像，则此操作将不起作用。解决方法是将 CSS 样式中使用的所有图像加载到保持隐藏状态的容器中，以便上述函数允许您加载图像。加载所有图像后，您可以删除包含纯 CSS 图像的元素，这样当您取消隐藏内容时，浏览器将立即渲染背景（等）。