按需圖像加載使用jQuery

假設我有股利和股利有許多相似圖片按需圖像加載使用jQuery

<div id="main"> 
<img src="~/images/img_1.png"> 
<img src="~/images/img_2.png"> 
<img src="~/images/img_3.png"> 
<img src="~/images/img_4.png"> 
<img src="~/images/img_5.png"> 
<img src="~/images/img_6.png"> 
</div> 


$('DIV.example').each(function() { 
if(this.complete) { 
//remove spinner and show actual image 
} 
});

當所有特別的div上述圖像將被加載的話，我想顯示微調繁忙圖像並且將具有完全在客戶端下載，然後我想顯示實際圖像，而不是微調。

我想以這種方式來檢測哪個圖像已完全下載，然後用實際圖像替換爲特定div而不是我的頁面中的所有圖像的微調器圖像url。

感謝

沒有工程....有人建議我這個代碼。

<div id="main"> 
<img src="~/images/busy.png" data-src='"~/images/img_1.png"'> 
<img src="~/images/busy.png" data-src='"~/images/img_2.png"'> 
<img src="~/images/busy.png" data-src='"~/images/img_3.png"'> 
<img src="~/images/busy.png" data-src='"~/images/img_4.png"'> 
<img src="~/images/busy.png" data-src='"~/images/img_5.png"'> 
</div> 

$('#main img').each(function() { 
    $(this).attr('src',$(this).attr('data-src')); 
}).removeAttr('data-src');

這裏如何判斷data-src映像文件是否已經被下載？ plzz指南。謝謝

thisTab.find('img[data-src]').each(function() { 
$(this).attr('src', $(this).attr('data-src')) 
     .removeAttr('data-src');

}）;

來源

2011-12-14 Keith Costa

我想看看[jQuery的Load（）方法] （http://api.jquery.com/load-eve nt /） – 2011-12-14 11:25:24

使用load事件來檢測元素是否已被加載。例如，

CSS

#main img { display: none; }

$('#main img').each(function() { 
    var loader = $('<img src="/images/loader.gif" />'); 
    $(this).after(loader).load(function() { loader.remove(); $(this).show(); }); 
    loader.show(); 
});

來源

2011-12-14 11:26:53 VinayC

一些建議我這樣的代碼 -

$（'＃main img'）。each（function（）{ $（this）.attr（'src'，$（this）。ATTR（ '數據-SRC'））; }）。removeAttr（'data-src'）; 它工作嗎？我如何檢測數據-Src圖像已被下載或沒有？ plzz指導我。感謝您的代碼。 – 2011-12-14 11:51:53

@ user750398，上述代碼的思想是，瀏覽器首先會顯示繁忙的圖像，然後當您更改src時，它會下載新圖像，然後顯示它何時加載。所以基本上，你不需要跟蹤圖像的加載。只要檢查它是否有效。 – VinayC 2011-12-15 04:34:37

更新未經測試的例子。

HTML

< DIV類=主>

< DIV類=主>

< DIV類=主>

< DIV類=主>

你可以使用asp：listview來呈現html。

CSS：

background: url('spinner.gif') no-repeat center center; 
width: 30px; 
height: 30px; 
display: inline; 
float: left; 
position: relative;

js函數

功能imageLoad（）{

 var loader = $('.main'); 

     loader.each(function(i){ 
      var img = new Image(); 
      $(img).load(
       function() { 
        $(this).hide(); 

        loader[i].append(this); 

        $(this).fadeIn(1000); 
      }) 


      $(img).attr('src', 'ur/actual/image/url'); 
     }) 


    }

來源

2011-12-14 11:58:09

按需圖像加載使用jQuery

回答

相關問題