6

在我通过做一些简单的事情来发出 ajax 请求之后$(element).load(url, callback);，页面上会有新的内容，包括图像等。

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

$(window).load();$(window).load()当页面新鲜时效果很好，因此您可以在加载所有内容之前显示加载动画，但是在已经触发后加载内容时似乎缺少像这样的简单内容。

编辑 6/6/12 晚上 11:55：我认为每个人都误解了我的问题。让我稍微解释一下：

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

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

那有意义吗？在 Ajax 的内容加载完成之后（不仅仅是在插入 HTML 之后），我们如何创建一个类似于$(window).load();for do stuff的事件？

4

5 回答 5

4

根据 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 图像的元素，这样浏览器将在您取消隐藏内容时立即呈现背景（等）。

于 2012-06-12T07:34:26.123 回答
1 
$(element).load(url, function(){
  //this code is executed after the page is loaded
})

你是这个意思吗？

于 2012-06-06T05:31:17.687 回答
1

听起来您正在寻找一种全局方法来处理所有 ajax 完成事件。你可以这样做。

$(document).ready(function () {
    $(document).ajaxComplete(function () { alert('ajax completed.') });
    $('#d').load("url-to-page", function (response, status, xhr) {
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
            alert(msg + xhr.status + " " + xhr.statusText);
        }
    });
});
于 2012-06-06T05:58:18.733 回答
1

几天前我偶然发现了这个问题，当时使用了你对你问题的回答，但后来我偶然发现了imagesLoaded插件，它可能对未来的其他人有所帮助。

于 2016-04-27T21:33:55.973 回答
0

我想你没有。您只需要触发将在 ajax 完成后执行的成功 ajax 事件。对你来说已经足够了。对于 ajax 返回的特定元素，您不需要像 .load() 这样的事件。但是您可以尝试将 load() 事件附加到元素，例如在服务器返回 html 之后但在它插入到 DOM 之前

于 2012-06-06T05:26:21.703 回答