Jquery Preloader停止了IE的工作
编辑：
我有一个多图像预加载脚本，我在IE上遇到问题，人们提到原因是因为缓存。 我目前正在考虑任何可以让我：
- 预加载一组预定义的图像，因为我的内容是通过ajax加载的
- 允许将这些图像设置为css背景
这是演示站点 （适用于IE以外的所有浏览器）
这就是代码现在的样子：
它看起来很长，但它主要只是重复代码
var src1 = 'img/map_bg_1680.jpg' , $img1 = $( '
' ); var src2 = 'img/menu-background.png' , $img2 = $( '
' ); var src3 = 'img/button01.png' , $img3 = $( '
' ); var src4 = 'img/button02.png' , $img4 = $( '
' ); var src5 = 'img/button03.png' , $img5 = $( '
' ); var src6 = 'img/button04.png' , $img6 = $( '
' ); var src7 = 'img/button05.png' , $img7 = $( '
' ); var src8 = 'img/button06.png' , $img8 = $( '
' ); var src9 = 'img/all_events_button.png' , $img9 = $( '
' ); var src10 = 'img/all_venues_button.png' , $img10 = $( '
' ); var src11 = 'img/event_finder_button.png' , $img11 = $( '
' ); var src12 = 'img/today-button.png' , $img12 = $( '
' ); var src13 = 'img/tomorrow-button.png' , $img13 = $( '
' ); var src14 = 'img/some-other-day-button.png' , $img14 = $( '
' ); var src15 = 'img/choose-button.png' , $img15 = $( '
' ); var src16 = 'img/newsearch-button.png' , $img16 = $( '
' ); var src17 = 'img/showresults-button.png' , $img17 = $( '
' ); $(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( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src1 + ')' ); jQuery( '#viewport-container' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src2 + ')' ); jQuery( '#events_map_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src3 + ')' ); jQuery( '#event_search_tool_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src4 + ')' ); jQuery( '#party_photos_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src5 + ')' ); jQuery( '#taxi_finder_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src6 + ')' ); jQuery( '#weather_forecast_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + src7 + ')' ); jQuery( '#contact_button' ).css( 'background-image', 'url( https://stackoverflow.com/questions/8843283/jquery-preloader-stopped-working-ie/' + 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' ); } }); 我感谢大家的意见，谢谢:)
这基本上是你的应用程序，加载图像+ html重写为使用jQuery的延迟对象
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 = $('![]()
').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); // eg: 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... } });
（不得不使用一些小的黑客，只是因为内容在你的主机上，所以显然你可以删除你的页面的那些黑客）
试试这个……
$(function() { var imgCount = $("img").length; $("img").one("load", function() { imgCount--; if (imgCount == 0) finish(); }).each(function() { if (this.complete) $(this).load(); }); });
基本上，在document.ready上，它会获取所有图像的计数，然后等待它们全部加载，然后再触发finish（）方法。 不要担心finish（）中的布尔值 – 只需注释掉即可。 还要注释掉所有.load（）处理程序。
这确实考虑了缓存，使用（this.complete）检查。 我已广泛使用它，它被certificate非常有用。
您预加载图像的方式没有考虑缓存的图像。 如果缓存，则可能无法始终触发加载事件。
这是一个预加载图像的插件。