搞清楚的時候都用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"); 
    }); 
});