是否有类似于“$(window）.load(）;”的东西用于在新插入的 Ajax 内容完成加载后执行函数

Is there something similar to `$(window).load();` for executing a function after newly inserted Ajax content has finished loading?

本文关键字：Ajax 插入 加载 函数 新插入 执行 window 类似于 load 用于 是否      更新时间：2023-09-26

在我通过执行一些简单的事情（例如$(element).load(url, callback);）发出ajax请求后，页面上将有包含图像等的新内容。

有没有办法在新内容加载完成后执行类似于$(window).load(callback)的操作？

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

编辑 6/6/12 11：55pm：我想每个人都误解了我的问题。让我更好地解释一下：

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

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

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

根据 jQuery：

当元素和所有子元素都已完全加载时，将向该元素发送 load 事件。此事件可以发送到与 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图像的元素，这样当您取消隐藏内容时，浏览器将立即呈现背景（等）。

$(element).load(url, function(){
  //this code is executed after the page is loaded
})

这是你的意思吗？

听起来你正在寻找一种全局方法来处理所有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);
        }
    });
});

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

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

相关文章：