搞清楚的时候都用jQuery.load（“url.html”）

Question

目前，我有一些类似的插入后，图像加载，加载在它具有图像目标网页div。

$('a.galleryNext').click(function(){ 
    // chnage the image to loading 
    $("#info").html("LOADING"); 
    $("#currentGal").load("gallery.php div#gallery"+currentgallery, function(){ 
     //this fires much too early, the images are still loading... 
     $("#info").html("DONE"); 
    }); 
}); 

我无法弄清楚是怎么#info变成在div完成加载（这恰好负载返回HTML之后）的影像后，别的东西。有没有办法做到这一点？

Answer 1

这正是您所需要的。我一直在工作中使用它来加载巨大的地图，而且它非常易于使用。

http://jqueryfordesigners.com/image-loading/

Answer 2

回调正在检查内容返回 - 意思是返回的标记。您必须执行其他检查以查看是否下载了图像。

你必须枚举HTML的图像，并检查它们是否已加载。

也许一个解决方案将每一个图像加载时间获取图像的计数，并递增加载计数器，使用.load回调函数。当加载的计数与图像计数相匹配时，则所有内容都已准备就绪。

看起来这可能是帮助你：

Waiting for images loading with JQuery

编辑

这里是一个可行的解决方案，在FF。不知道这是最好的方式，或者它是如何工作的IE浏览器，但你的想法。

 var $images = $("#somediv img"); 
     if ($images.length) { 

      var imageCount = $images.length; 
      var imageLoadedCount = 0; 

      $images.each(function() { 
       $(this).load(function() { 
        imageLoadedCount += 1; 
       }); 
      }); 

      var intervalId = setInterval(function() { 
       if (imageCount == imageLoadedCount) { 
        //console.log("all loaded"); 
        clearInterval(intervalId); 
       }; 
      }, 200); 


     }; 

Answer 3

我喜欢用类来控制背景图像的加载/ GIF做

而且你的负载（）语法四下关。请参阅：http://docs.jquery.com/Ajax/load

<style> 

.done { background-image:done.gif; } 
.loading { background-image:loading.gif; } 

</style> 
<script> 
    $('a.galleryNext').click(function(){ 

     $("#info").addClass("loading"); 
     $("#info").removeClass("done"); 
     $("#currentGal").load("gallery.php", null, function(){ 

      $("#info").removeClass("loading"); 
      $("#info").addClass("done"); 
     }); 
    }); 
</script> 

<div id="currentGal"></div> 
<div id="info"></div> 

Answer 4

我从一些代码，我在另一个论坛找到适应了这个非常简单的功能。它包含一个回调函数，供您在图像加载完成时使用。

function imgsLoaded(el,f){ 
    var imgs = el.find('img'); 
    var num_imgs = imgs.length; 

    if(num_imgs > 0){ 
    imgs.load(function(){ 
     num_imgs--; 
     if(num_imgs == 0) { 
     if(typeof f == "function")f();//custom callback 
     } 
    }); 
    }else{ 
    if(typeof f == "function")f();//custom callback 
    } 
} 

用法：

imgsLoaded($('#container'),function(){ 

//stuff to do after imgs have loaded 

}); 

希望这有助于！

W.

Answer 5

这是我刚刚想出了一个功能：

function when_images_loaded($img_container, callback) { //do callback when images in $img_container are loaded. Only works when ALL images in $img_container are newly inserted images. 
    var img_length = $img_container.find('img').length, 
     img_load_cntr = 0; 

    if (img_length) { //if the $img_container contains new images. 
     $('img').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(); 
    } 

}

巧合的是，它几乎是相同的pagewil的答案，但我想出了我的我自己。 ; D

将.load（）内容加载到容器后使用此函数。

例如：

$("#foobar").load("gallery.php", null, function(){ 
    when_images_loaded($("#foobar"), function(){ 
     $("#info").removeClass("loading"); 
     $("#info").addClass("done"); 
    }); 
});