1

我有一个通过 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()永远不会触发，一旦所有图像完成加载，我就需要运行代码，因此将加载事件绑定到每个图像并不是一个真正的选择。

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

我非常感谢您的帮助，非常感谢。

4

3 回答 3

3

$(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();
           };
       }
    });
});

现在可以在此站点上进行测试：单击配方的链接并查看控制台。

于 2012-06-24T17:07:15.243 回答
3

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

$('.article img').imagesLoaded( myCallbackFunction );
于 2012-06-24T17:09:40.913 回答
0

此外，您使用 XMLHttpRequest ......使用 JQuery 更容易。您可以摆脱所有发布的代码，只需执行以下操作：

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

这就是你所需要的。如果您需要在加载窗口时触发一些代码，请使用您的 $(window).load()。如果需要在ajax请求之后触发代码，只需将其放在上面的回调函数（）中即可

于 2012-06-24T17:09:11.717 回答