jQuery的預加載器插件不工作在IE 8及以下...

Question

我一直在使用下面的預加載腳本來加載所有的圖像，然後切換兩個div顯示設置，以防止用戶看到網站「放在一起」。問題是，當然，IE 8拒絕切換。我已經看過幾個preloader問題和這樣的錯誤，他們都參考緩存，但我還沒有找到一個實際的修復......任何幫助將不勝感激。下面是代碼：

擴展：

(function($) { 
var imgList = []; 
$.extend({ 
    preload: function(imgArr, option) { 
     var setting = $.extend({ 
      init: function(loaded, total) {}, 
      loaded: function(img, loaded, total) {}, 
      loaded_all: function(loaded, total) {} 
     }, option); 
     var total = imgArr.length; 
     var loaded = 0; 

     setting.init(0, total); 
     for(var i in imgArr) { 
      imgList.push($("<img />") 
       .attr("src", imgArr[i]) 
       .load(function() { 
        loaded++; 
        setting.loaded(this, loaded, total); 
        if(loaded == total) { 
         setting.loaded_all(loaded, total); 
        } 
       }) 
      ); 
     } 

    } 
}); 
})(jQuery); 

的代碼來調用它：

$(function() { 
<? if ($dir = opendir('images')) { 
     $images = array(); 
     while (false !== ($file = readdir($dir))) { 
      if ($file != "." && $file != "..") { 
       $images[] = $file; 
      } 
     } 
     closedir($dir); 
     foreach($images as $image) { 
      if(stristr($image, '.')) 
      $preload .= "'images/".$image."',"; 
     } 
     $preload = substr($preload, 0, -1); 
    }?> 

    $.preload([<?=$preload?>], 
    { 
     loaded_all: function(loaded, total) { 
      $('#main_loading').css('display', 'none'); 
      $('#container').css('display', 'block'); 
     } 
    }); 

}); 

我忘了，我最初發現這個代碼，但已經修改了一點，以滿足我需要。我們的開發網站，這可以看出是：http://www.branninggroup.com/backbeat/media_player/

我把一個臨時修復，所以它現在在IE瀏覽器部分工作，迫使顯示它10秒等待，但顯然寧願能夠知道什麼時候圖像已加載所有顯示頁面....任何提示/建議將不勝感激。

Answer 1

該插件做錯了事，其中之一與IE和load事件有關。

您需要定義load事件，然後然後設置src屬性/屬性。

嘗試用...

(function($) { 
var imgList = []; 
$.extend({ 
    preload: function(imgArr, option) { 
     var setting = $.extend({ 
      init: function(loaded, total) {}, 
      loaded: function(img, loaded, total) {}, 
      loaded_all: function(loaded, total) {} 
     }, option); 
     var total = imgArr.length; 
     var loaded = 0; 

     setting.init(0, total); 
     for (var i = 0; i < total; i++) { 
      imgList.push($("<img />") 
       .load(function() { 
        loaded++; 
        setting.loaded(this, loaded, total); 
        if(loaded == total) { 
         setting.loaded_all(loaded, total); 
        } 
       }) 
       .attr("src", imgArr[i]); 

      ); 
     } 

    } 
}); 
})(jQuery); 

我也改變了for (in)循環正常for循環替換它。你不想疏通prototype鏈。您也可以使用$.each()。