Question

我有一个通过AJAX加载内容的页面。其中包括一些图片。我需要根据图像大小（有所不同）对页面布局进行一些格式化，但为了获得大小，我需要先在运行代码之前完成加载。如果它在普通页面中（内容通常没有AJAX加载），我所要做的就是使用$(window).load()函数，但是由于某些原因，它不会触发AJAX。我需要一个解决方法：在通过AJAX加载的图像完成加载后执行某些代码的方法。

基本上，这就是我要做的事情

ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
document.getElementById("results").innerHTML=ajaxRequest.responseText;
//the responseText includes images among other information to be loaded 
$(window).load(function() {
...some code
});}}

但是$(window).load()永远不会触发，我需要在所有图像加载完毕后运行代码，因此将加载事件绑定到每个图像实际上都不是一个选项。

我有另一个与第一个问题相关且类似的问题：在通过AJAX加载内容后，jQuery $(document).ready似乎也没有触发。我现在不需要它，但我将来肯定会这样做，所以对此也有任何解决方法吗？

我非常感谢你的帮助和非常感谢。

Answer 1

$（window）.load仅适用于页面初始加载。

我看到的唯一清洁解决方案是计算图像（希望它们是唯一的问题）并等待它们加载：

$('#results').load('youurl', function() {
    var $images = $('#contenu img');
    var count = $images.length;
    console.log('initial images count : ', count);
    var decrement = function() {
        if (--count==0) {
            console.log('All images loaded');
            // do something                 
        }
    };
    $images.each(function(){
       if (this.complete) {
           decrement();
       } else {
           this.onload = function(){
                decrement();
           };
       }
    });
});

现在可以在this site上测试：点击食谱链接并查看控制台。

Answer 2

我相信你想要的是imagesLoaded插件。通过AJAX加载标记后，选择此div中的图像并在其上调用.imagesLoaded()：

$('.article img').imagesLoaded( myCallbackFunction );

Answer 3

此外，您使用XMLHttpRequest ...使用JQuery更容易。你可以删除你发布的所有代码，只需这样做：

$("#results").load("ajaxpage.php", function() { ... some code... });

就是你所需要的一切。如果您需要在加载窗口时触发一些代码，请使用$（window）.load（）。如果你需要在ajax请求之后触发代码，只需将它放在

上面的回调函数（）中

页面完成加载AJAX内容后运行jQuery代码

3 个答案: