jQuery的預載不輟IE

Question

編輯：

我有我在使用IE瀏覽器問題的多重圖像預加載腳本，而人們也提到，原因是因爲緩存。我目前exporing，讓我到任何替代：

• 預加載預定義組圖片，因爲我的內容是通過AJAX加載
• 允許設置這些圖像爲背景的CSS

Here's the demo site （工作在IE之外的所有瀏覽器）

而這裏的代碼看起來像現在：

它看起來很長，但它大多隻是重複代碼

var src1 = 'img/map_bg_1680.jpg' 
    , $img1 = $('<img src="' + src1 + '">'); 

    var src2 = 'img/menu-background.png' 
    , $img2 = $('<img src="' + src2 + '">'); 

    var src3 = 'img/button01.png' 
    , $img3 = $('<img src="' + src3 + '">'); 

    var src4 = 'img/button02.png' 
    , $img4 = $('<img src="' + src4 + '">'); 

    var src5 = 'img/button03.png' 
    , $img5 = $('<img src="' + src5 + '">'); 

    var src6 = 'img/button04.png' 
    , $img6 = $('<img src="' + src6 + '">'); 

    var src7 = 'img/button05.png' 
    , $img7 = $('<img src="' + src7 + '">'); 

    var src8 = 'img/button06.png' 
    , $img8 = $('<img src="' + src8 + '">'); 

    var src9 = 'img/all_events_button.png' 
    , $img9 = $('<img src="' + src9 + '">'); 

    var src10 = 'img/all_venues_button.png' 
    , $img10 = $('<img src="' + src10 + '">'); 

    var src11 = 'img/event_finder_button.png' 
    , $img11 = $('<img src="' + src11 + '">'); 

    var src12 = 'img/today-button.png' 
    , $img12 = $('<img src="' + src12 + '">'); 

    var src13 = 'img/tomorrow-button.png' 
    , $img13 = $('<img src="' + src13 + '">'); 

    var src14 = 'img/some-other-day-button.png' 
    , $img14 = $('<img src="' + src14 + '">'); 

    var src15 = 'img/choose-button.png' 
    , $img15 = $('<img src="' + src15 + '">'); 

    var src16 = 'img/newsearch-button.png' 
    , $img16 = $('<img src="' + src16 + '">'); 

    var src17 = 'img/showresults-button.png' 
    , $img17 = $('<img src="' + src17 + '">'); 

$(document).ready(function() { 

    $(".ajax").colorbox(); 




var img1loaded = false 
    , img2loaded = false 
    , img3loaded = false 
    , img4loaded = false 
    , img5loaded = false 
    , img6loaded = false 
    , img7loaded = false 
    , img8loaded = false 
    , img9loaded = false 
    , img10loaded = false 
    , img11loaded = false 
    , img12loaded = false 
    , img13loaded = false 
    , img14loaded = false 
    , img15loaded = false 
    , img16loaded = false 
    , img17loaded = false; 

$img1.bind('load', function(){ 
    img1loaded = true; 
    finish(); 
}); 

$img2.bind('load', function(){ 
    img2loaded = true; 
    finish(); 
}); 

$img3.bind('load', function(){ 
    img3loaded = true; 
    finish(); 
}); 

$img4.bind('load', function(){ 
    img4loaded = true; 
    finish(); 
}); 

$img5.bind('load', function(){ 
    img5loaded = true; 
    finish(); 
}); 

$img6.bind('load', function(){ 
    img6loaded = true; 
    finish(); 
}); 

$img7.bind('load', function(){ 
    img7loaded = true; 
    finish(); 
}); 

$img8.bind('load', function(){ 
    img8loaded = true; 
    finish(); 
}); 

$img9.bind('load', function(){ 
    img9loaded = true; 
    finish(); 
}); 

$img10.bind('load', function(){ 
    img10loaded = true; 
    finish(); 
}); 

$img11.bind('load', function(){ 
    img11loaded = true; 
    finish(); 
}); 

$img12.bind('load', function(){ 
    img12loaded = true; 
    finish(); 
}); 

$img13.bind('load', function(){ 
    img13loaded = true; 
    finish(); 
}); 

$img14.bind('load', function(){ 
    img14loaded = true; 
    finish(); 
}); 

$img15.bind('load', function(){ 
    img15loaded = true; 
    finish(); 
}); 

$img16.bind('load', function(){ 
    img16loaded = true; 
    finish(); 
}); 

$img17.bind('load', function(){ 
    img17loaded = true; 
    finish(); 
}); 

function finish(){ 
    if(!img1loaded || !img2loaded || !img3loaded || !img4loaded || !img5loaded || !img6loaded || !img7loaded || !img8loaded || !img9loaded || !img10loaded || !img11loaded || !img12loaded || !img13loaded || !img14loaded || !img15loaded || !img16loaded || !img17loaded){ return; } 
      jQuery('#main-content-fiftyfive').load('index2.html', function() { 
       $('#bgDiv').css('background-image', 'url(' + src1 + ')'); 
       jQuery('#viewport-container').css('background-image', 'url(' + src2 + ')'); 
       jQuery('#events_map_button').css('background-image', 'url(' + src3 + ')'); 
       jQuery('#event_search_tool_button').css('background-image', 'url(' + src4 + ')'); 
       jQuery('#party_photos_button').css('background-image', 'url(' + src5 + ')'); 
       jQuery('#taxi_finder_button').css('background-image', 'url(' + src6 + ')'); 
       jQuery('#weather_forecast_button').css('background-image', 'url(' + src7 + ')'); 
       jQuery('#contact_button').css('background-image', 'url(' + src8 + ')'); 

       $('#right-content').load('partytool.html', function() { 

        setPartyToolsButtons(); 

        $('#whole-ajax-content-one').load('events.html', function() { 
         setDayChooserButtons(); 
         $('.preloader').fadeOut('slow', function() { 
          $('#bgDiv').fadeIn('slow', function() { 
           $('#table-holder').fadeIn('slow', function() { 
           initialConfig(); 
         }); 
        }); 
       }); 
      });  
     }); 
    }); 
} 
if($img1[0].width){ $img1.trigger('load'); } 
if($img2[0].width){ $img2.trigger('load'); } 
if($img3[0].width){ $img3.trigger('load'); } 
if($img4[0].width){ $img4.trigger('load'); } 
if($img5[0].width){ $img5.trigger('load'); } 
if($img6[0].width){ $img6.trigger('load'); } 
if($img7[0].width){ $img7.trigger('load'); } 
if($img8[0].width){ $img8.trigger('load'); } 
if($img9[0].width){ $img9.trigger('load'); } 
if($img10[0].width){ $img10.trigger('load'); } 
if($img11[0].width){ $img11.trigger('load'); } 
if($img12[0].width){ $img12.trigger('load'); } 
if($img13[0].width){ $img13.trigger('load'); } 
if($img14[0].width){ $img14.trigger('load'); } 
if($img15[0].width){ $img15.trigger('load'); } 
if($img16[0].width){ $img16.trigger('load'); } 
if($img17[0].width){ $img17.trigger('load'); } 


}); 

我感謝每個人的投入，謝謝:)

Answer 1

這基本上是你的應用程序，圖片加載+ HTML改寫爲使用jQuery的Deferred對象

http://jsfiddle.net/roberkules/hH8YN/ - >對我的作品在IE8，FF9 & Chrome16

腳本的主要部分是：

var images = { 
    'bg': 'img/map_bg_1680.jpg' 
    // ... 
}; 

var defer = $.Deferred(); 

var promise = $.when.apply($, $.merge([defer.promise()], $.map(images, function(value, key) { 
    var d = $.Deferred(), 
     img = $('<img />').attr('src', root_path + value).load(function() { 
      console.log('loaded img', key, value); 
      d.resolve(); 
     }).get(0); 

    if (img.complete) { 
     console.log('cached img', key, value); 
     d.resolve(); 
    } else { 
     window.setTimeout(function() { 
      if (!d.isResolved()) { 
       console.log('timeout img', key, value); 
       d.resolve(); 
      } 
     }, 15000); // e.g.: 15 seconds timeout 
    } 

    return d.promise(); 
}))); 

$(function() { 
    $.get('index2.html', function(data) { 
     console.log('loaded html', 'index2.html'); 
     $('#main-content-fiftyfive').html(data.responseText || data); 
     defer.resolve(); 
    }); 

    promise.done(function() { 
     // index2.html + images loaded... 
    } 
}); 

（不得不用一些小的竅門，只是因爲它的內容是你的主機上，所以很明顯，你可以刪除你的頁面的黑客）

Answer 2

你的預加載圖像的方式並不顧及形象被緩存。如果它被緩存，它可能不會總是觸發加載事件。

這是一個預加載圖像的插件。

https://github.com/tentonaxe/jQuery-preloadImages

Answer 3

試試這個...

$(function() { 
    var imgCount = $("img").length; 
    $("img").one("load", function() { 
     imgCount--; 
     if (imgCount == 0) finish(); 
    }).each(function() { 
     if (this.complete) $(this).load(); 
    }); 
}); 

基本上，上的document.ready它得到的所有圖像的計數，然後等待點火結束之前，直到他們都加載（）方法。不要擔心finish（）中的布爾值 - 只是註釋掉。同時註釋掉所有的.load（）處理程序。

這會通過（this.complete）檢查將高速緩存考慮在內。我廣泛使用了它，它被證明非常有用。