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

Question

在我通过像 $(element).load(url, callback); 这样的简单操作发出 ajax 请求后，页面上将出现包含图像等的新内容。

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

$(window).load(); 在页面新鲜时效果很好，这样您就可以显示加载动画，直到所有内容都加载完毕，但是像这样简单的东西似乎缺少在 $(window).load() 已被触发后加载内容时。

EDIT 6/6/12 11:55pm:我认为每个人都误解了我的问题。让我更好地解释一下:

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

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

这有意义吗？我们如何创建一个类似于 $(window).load(); 的事件来在 Ajax 内容加载完成后执行操作(不是在 HTML 加载完成后)插入)？

Answer 1

根据 jQuery:

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

因此，在更新 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 图像的元素，这样浏览器将在您取消隐藏内容时立即呈现背景(等)。