使用jQuery按需加載圖像

Question

假設我有div並且div有很多像

<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圖像文件是否已下載？ 請指導。 謝謝

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

}）;

Answer 1

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

的CSS

#main img { display: none; }

JS

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

Answer 2

更新了示例，但未進行測試。

的HTML

<div class = main>

<div class = main>

<div class = main>

<div class = main>

您可以使用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'); }) }