jQuery圖像交換顯示 - IE8的錯誤？

Question

作爲藝術家的Wordpress網站的一部分，我做了一個簡單的jQuery圖像交換週期，以在每個個人自定義帖子上使用。從本質上講，只是一張大圖片，下面有一張照片來源，下面有一張七張縮略圖，用來展示藝術作品的不同視角。點擊每個縮略圖將縮略圖中的當前大圖像替換爲href，以及替換照片積分。照片積分使用一個隱藏的div，每個縮略圖中包含.hideText類，其中包含由PHP提供的相關攝影師名稱。在IE8中，在第一次加載時，每個圖像可以按順序點擊以產生相應的大圖像，但是在點擊第七個縮略圖或點擊直線後雖然href仍然正確，但數字序列導致大圖不顯示。注意：使用jQuery 1.8.2和Modernizr 2.6.2。

除了IE8的錯誤之外，還有其他三個令人頭痛的問題值得一提。 1）使用.load（）會產生緩慢的加載時間，直到圖像被緩存。我想我應該使用預加載器，但不知道如何使用這個設置進行工作。 2）由於大圖像加載緩慢，絕對定位的照片榮譽有時會顯示在錯誤的位置，直到img加載。理想情況下，jQuery照片信用塊將被鏈接以遵循圖像加載代碼以避免這種情況;我試圖使用匿名函數來做到這一點，但無法讓它工作，所以.delay（）是一個駭人而不可靠的選擇。 3）點擊後，應該在隱藏舊圖像之前添加#artWrap背景微調框，並在新圖像淡入之後將其刪除，但不能一致地工作。

鑑於意外的時間投資，回想起來我可能會使用WP圖庫插件，但我想了解這個東西。歡迎任何建議！

相關的jQuery：

$('.thumbnail').live("click", function() { 

$('#artWrap').css('background-image', "url('../img/ajax-loader-48-48.gif')"); 
$('#artLarge').hide(); 

var i = $('<img />').attr('src',this.href).load(function() { 
    $('#artLarge').attr('src', i.attr('src')); 
    $('#artLarge').fadeIn(200);  
    $('#artWrap').css('background-image', 'none'); 
}); 

if ($(this).find('.hideText').is(':empty')) { 
    $('#photoCredit').hide().empty(); 
} else { 
    $('#photoCredit').hide().empty(); 
    var newCredit = $(this).find('.hideCredit').html(); 
    $('#photoCredit').html(newCredit).delay(600).fadeIn(200); 
} 

return false; 

}); 

...

基本的div結構：

<div id="artShow"> 

    <div id="artWrap" > 

     <div id="artImage"> 
      <img id="artLarge" src="../uploads/EXAMPLE_1-LG.jpg"> 
     </div><!-- #artImage --> 

     <div id="photoCredit"> 
      Photo: Example 1 Photographer 
     </div><!-- .artCredit --> 

    </div><!-- #artWrap --> 

    <div id="artThumbs" class="clearfix"> 

     <div id="thumb1" class="thumb"> 
      <a href="../uploads/EXAMPLE_1-LG.jpg" class="thumbnail nofancybox"><!-- large image link goes in href here --> 
       <img src="../uploads/EXAMPLE_1-SM.jpg" width="72" height="72" ><!-- small image --> 
      </a> 
      <div class="hideCredit">Photo: Example 1 Photographer</div> 

     </div><!-- #thumb1 --> 

     <div id="thumb2" class="thumb"> 
      <a href="../uploads/EXAMPLE_2-LG.jpg" class="thumbnail nofancybox"> 
       <img src="../uploads/EXAMPLE_2-SM.jpg" width="72" height="72" > 
      </a> 
     <div class="hideCredit">Photo: Example 2 Photographer</div> 

     </div><!-- #thumb2 --> 

     <div id="thumb3" class="thumb"> ... ETC ... </div> 
     <div id="thumb4" class="thumb"> ... ETC ... </div> 
     <div id="thumb5" class="thumb"> ... ETC ... </div> 
     <div id="thumb6" class="thumb"> ... ETC ... </div> 
     <div id="thumb7" class="thumb"> ... ETC ... </div> 

    </div><!-- #artThumbs --> 

</div><!-- #artShow --> 

...

Pe的rtinent CSS：

/* Content shell for whole image swap show */ 
#artShow { float: right; position: relative; width: 630px; min-height: 570px; } 

/* wrap for both image and photo credit */ 
#artWrap { float: left; position: relative; background: url('../img/ajax-loader-48-48.gif') center center no-repeat; } 

/* wrapper for large image */ 
#artImage { min-height: 456px; margin-bottom: 19px; line-height: 0; /* lh adjusts photo credit */ } 

/* ID attached to large img */ 
#artLarge { } 

/* photo credit below artImage */ 
#photoCredit { 
position: absolute; 
right: 0; 
bottom: -5px; 
height: 16px; 
padding-top: 3px; 
width: 100%; 
text-align: right; 
} 

#artThumbs { position: absolute; top: 492px; left: 0; width: 651px; height: 72px; } 

.thumb { float: left; margin-right: 21px; width: 72px; height: 72px; background-color: #c9c9c9; } 

.thumbnail { display: block; width: 72px; height: 72px; } 

Answer 1

與您提供的分期URL調試的一點點後，我想我可以看到的問題是什麼你。

看起來您的​​函數的圖像（第57行AM_main.js）只在第一次加載圖像時被調用。如果再次單擊相同的圖像，則不會調用load()函數。

這是因爲圖像已經加載，因此在您再次加載時會出現在瀏覽器緩存中。這裏發生的事情是load事件是發射，但是因爲圖像已經在緩存中，所以當src屬性被設置時它立即發射。

這裏的關鍵詞是立即。在jQuery進入代碼的下一位之前，load事件被觸發並結束......這是您指定要調用load事件的函數的位置。 load()功能是在事件load已經發生之後定義的。

所以這裏的解決方案是改變你的jQuery代碼的順序，以便在指定src屬性之前定義加載事件函數。這是相當微不足道的。它只是需要你的現有代碼的輕微重新排列，像這樣：

var i = $('<img />').load(function() { 
    .... 
}).attr('src',this.href); 

希望，這應該解決的問題爲您服務。

另一種解決方案是避免每次運行click事件時重新創建一個新的<img>元素。如果每次都重複使用一個<img>元素，那麼當設置src時，負載甚至會始終處於適當位置，因此上述問題不會發生;即使事件立即觸發，也沒關係，因爲事件處理函數已經存在。

該解決方案還可以爲您帶來小的性能優勢，無需重複創建<img>元素。

當然，不利的一面是，它會比上面的其他解決方案更大的代碼更改。但這不會是一個大量的工作，所以也許你應該試一試。

無論您採用哪種解決方案，我都希望能夠幫到您。