jQuery Preloader停止工作IE [英] Jquery Preloader stopped working IE
本文介绍了jQuery Preloader停止工作IE的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个在IE上遇到问题的多图像预加载脚本，人们已经提到原因是由于缓存.我目前正在研究允许我进行以下操作的所有替代方法:
I have a multiple image preloading script that I'm having problems with on IE, and people have mentioned that the reason is because of caching. I'm currently exporing any alternatives that would allow me to:
- 预加载一组预定义图片，因为我的内容是通过ajax加载的
- 被允许将这些图像设置为css背景
- Preload a predefined set of images because my content is loaded via ajax
- Be allowed to set those images as css backgrounds
这是演示站点 (适用于除IE之外的所有浏览器)
Here's the demo site (works in all browsers except 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' ); }
});
我感谢大家的投入，谢谢:)
I appreciate everyone's input, thank you :)
推荐答案
这基本上是您的应用程序，使用jQuery的Deferred Object重写了图像+ html的加载
this is basically your app, the loading of images + html rewritten to use jQuery's Deferred Object
http://jsfiddle.net/roberkules/hH8YN/->在IE8上对我有用，FF9和Chrome16
http://jsfiddle.net/roberkules/hH8YN/ -> works for me on 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...
}
});
(由于内容在您的主机上，所以不得不使用一些较小的技巧，所以显然您可以为页面删除这些技巧)
(had to use some minor hacks, just because the content is on your host, so obviously you can remove those hacks for your page)
这篇关于jQuery Preloader停止工作IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
