無法在IE8中使圖像預加載正常工作

我正在處理圖像幻燈片，允許用戶以半全屏方式循環顯示一組圖像。下面是它的一個開發版：無法在IE8中使圖像預加載正常工作

[鏈接刪除，只是臨時鏈接]

有幾種方法可以前進到下一個圖像：通過點擊大圖，通過選擇一個特定的拇指，通過使用箭頭圖標甚至鍵盤箭頭。所有這些基本上調用一個js函數的LoadImage用正確的PARAMS：

function loadImage(id,url) { 

     // general image loading routine 

     // enable loader indicator 
     $("#loading").toggle(); 

     var imagePreloader = new Image(); 
     imagePreloader.src = url; 
     loading = true; 
     $(imagePreloader).load(function() { 

      // load completed, hide the loading indicator 
      $("#loading").toggle(); 

      // set the image src, this effectively shows the image 
      var img = $("#bigimage img"); 
      img.attr({ src: url }); 

      // reset the image dimensions based upon its orientation 
      var wide = imagePreloader.width >= imagePreloader.height; 
      if (wide) { 
       img.addClass('wide'); 
       img.removeClass('high'); 
       img.removeAttr('height'); 
      } else { 
       img.addClass('high'); 
       img.removeClass('wide'); 
       img.removeAttr('width'); 
      } 

      // update thumb status 
      $(".photos li.active").removeClass('active'); 
      $("#li-" + id).addClass('active'); 

// get the title from the active thumb and set it on the big image 
var imgTitle = $("#li-" + id + " a").attr('title'); 
log(id + ":" + imgTitle); 
     $(".caption h1").text(imgTitle); 

     // loading routine completed 
     loading = false; 

     //return true; 
     }); 
}

那裏面有沒有對這個問題相關的東西很多，但重點是在請求圖像的實際預加載和顯示。整體在Firefox和Chrome中都運行良好，但在IE8中沒有任何反應。奇怪的是，它在我第一次點擊下一個箭頭或使用鍵盤箭頭時工作，然後它只是失敗。

我很難調試這個。在單步執行代碼時，我發現加載事件處理程序從未實際調用，儘管確保傳入的URL是正確的。我已經嘗試過imagePreloader.onLoad（沒有jQuery），但這也沒有效果。我堅持調試，並理解它爲什麼第一次工作。

來源

2011-02-11 Ferdy

嘗試首先分配`load`處理程序。並設置`.src`後值 – zxcat 2013-07-13 13:33:29

這聽起來像是由於圖像緩存。在某些情況下，當圖像緩存在瀏覽器緩存中時，無法觸發事件處理程序。有關該問題，請參閱this post。

查看$.fn.imagesLoaded jQuery plugin。

來源

2011-02-11 12:39:16 Neil

看起來你是對的，謝謝！我會檢查該線程中的建議，看看是否有解決方法。 – Ferdy 2011-02-11 12:47:06

無法在IE8中使圖像預加載正常工作

回答

相關問題