在IE7/8中隨機發射的圖像加載事件

Question

風雲作弊：

我在調整大小/預載JavaScript圖像之前，先在頁面上顯示它們。

問題：

IE7/8往往randomy火了一段影像，而不是對他人的加載事件（這是完全隨機的，不同在每次刷新時）

代碼：

JS：

$(document).ready(function(){ 
$(".daImg").hide(); 
$("figure").each(function(){ 
    $(this).append('<div class="loader"><img src="images/ajax-loader.gif"></div>'); 
    var afb = $(this).find(".daImg"); 
    afb.load(function(){ 
    console.log("loaded");   
    $(this).parent().parent().parent().find(".loader").remove(); 
    if($(this).parent().parent().parent().is(".last")){ 
     if(afb.height() > 280){ 
      var w = (afb.width()/afb.height())*280 
      afb.css("width",w); 
      afb.css("height","280px"); 
     } 
    } else { 
     if(afb.height() > 245){ 
      var w = (afb.width()/afb.height())*245 
      afb.css("width",w); 
      afb.css("height","245"); 
     } 
    } 
    afb.css("left","50%"); 
    afb.css("margin-left","-"+afb.width()/2+"px"); 
    afb.fadeIn(); 
    }) 
}); 
} 

HTML

<figure class="left">      
<a href="foobar.html"> 
    <div class="imageWrap"> 
     <img class="daImg" src="foo-bar.png" alt="foobar" /> 
    </div> 
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
     <span class="price">99</span> 
    </figcaption> 
</a> 

<figure class="left">      
<a href="foobar.html"> 
    <div class="imageWrap"> 
     <img class="daImg" src="foo-bar.png" alt="foobar" /> 
    </div> 
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
     <span class="price">99</span> 
    </figcaption> 
</a> 

<figure class="left">      
<a href="foobar.html"> 
    <div class="imageWrap"> 
     <img class="daImg" src="foo-bar.png" alt="foobar" /> 
    </div> 
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
     <span class="price">99</span> 
    </figcaption> 
</a> 

<figure class="left">      
<a href="foobar.html"> 
    <div class="imageWrap"> 
     <img class="daImg" src="foo-bar.png" alt="foobar" /> 
    </div> 
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
     <span class="price">99</span> 
    </figcaption> 
</a> 

<figure class="left">      
<a href="foobar.html"> 
    <div class="imageWrap"> 
     <img class="daImg" src="foo-bar.png" alt="foobar" /> 
    </div> 
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
     <span class="price">99</span> 
    </figcaption> 
</a> 

如果有人能夠對這裏發生的事情有所瞭解，我會很感激！

注意：此問題與緩存無關，因爲我在我的實際代碼中爲所有圖像添加了時間戳。

Answer 1

，你可以嘗試不同的方法，你的情況

使用CSS

.daImg { 
    display:none; 
} 

然後勾上$圖像大小調整的腳本（窗口）.load（）; 並處理所有圖像：不是（：可見）立即

您也可以將其他瀏覽器複製到img.load事件，但對於不可見的圖像。我的意思是你的選擇是var afb = $(this).find(".daImg:not(:visible)");

在這種情況下

IE不受其他事件處理的圖像都將得到處理有