$ .get僅在內容（包括圖像）準備就緒後才能加載和顯示div中的內容

我正在使用get將內容加載到div然後顯示它。很好，很容易。

$.get($(this).attr("href"), function (data) { 
    $('#boardData').html(data); 
    $('#boardContent').show(); 
    $('#BoardImages a').lightBox(); 
});

我想只顯示DIV，我$('#boardContent').show();，一旦所有的圖像都從我的數據，我通過我獲取了加載。

來源

2009-11-10 Slee

的方式，我已經做到了這一點 - 你真的可能只需要擔心的是從其他地方得到他們的內容元素，如圖像 - 是保持該元素的計數需要在所有這些元素上加載和使用加載事件處理程序。當所有元素都被加載後，讓你的處理程序觸發節目。作爲一個backstop，你需要設置一個計時器來觸發顯示，以防在應用處理器之前加載一些元素。

$.get($(this).attr("href"), function (data) { 
     var images = $(data).find('img'); 
     var imageCount = images.length; 
     var loaded = 0; 
     var timer = setTimeout(function() { 
       timer = null; 
       $('#boardContent:hidden').show(); 
     }, 10000); 
     images.load(function() { 
      ++loaded; 
      if (loaded >= imageCount) { 
      if (timer) clearTimeout(timer); 
      timer = null; 
      $('#boardContent:hidden').show(); 
      } 
     }); 

     $('#boardData').html(data); 
     $('#BoardImages a').lightBox(); 
});

來源

2009-11-10 14:40:32 tvanfosson

這使我在正確的道路上，setTimeout是一個問題，雖然它總是被創建，我不止一次地加載內容到這個div，我將如何取消setTimeout？我猜在if（loaded> = imageCount）？ – Slee 2009-11-10 15:25:03

在加載處理程序之前創建超時並將其分配給變量。清除裝載處理程序中的超時，如果它尚未被刪除。 – tvanfosson 2009-11-10 15:35:38

這就是我所做的 - 謝謝！ – Slee 2009-11-10 15:40:12

你可以掃描HTML數據<img>元素，然後通過預加載其「的onComplete」運行它們回調指定包含$('#boardContent').show();

編輯：

下面是我爲自己在寫一個插件另一個項目...

 jQuery.extend(jQuery, { 
      imagesToLoad: 0, 
      loadedImages: [], 
      preloadImages: function(){ 
       var settings = { 
        urls : [], 
        begin : function(){}, 
        each : function(){}, 
        complete : function(){}, 
        scope: window 
       }; 
       jQuery.extend(settings, arguments[0]); 
       var images = []; 

       jQuery.imagesToLoad = settings.urls.length; 

       settings.begin.call(settings.scope, settings.urls); 
       for(var i = 0; i = jQuery.imagesToLoad){ 
          settings.complete.call(settings.scope,jQuery.loadedImages); 
         } 
        } 
        images[i].src= settings.urls[i]; 
       } 
      } 
     });

來源

2009-11-10 14:39:59 JasonWyatt

$ .get僅在內容（包括圖像）準備就緒後才能加載和顯示div中的內容

回答

相關問題