Question

编辑：

我有一个多图像预加载脚本，我在IE上遇到问题，人们提到原因是因为缓存。我目前正在考虑允许我做出的任何替代方案：

预加载预定义的图像集，因为我的内容是通过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

试试这个......

$(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）检查。我已经广泛使用它，它被证明非常有用。

Answer 2

预加载图片的方式没有考虑缓存的图像。如果它被缓存，它可能不会总是触发加载事件。

这是一个预加载图片的插件。

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

Answer 3

这基本上是你的应用程序，加载图像+ html重写为使用jQuery的延迟对象

http://jsfiddle.net/roberkules/hH8YN/ - ＆gt;适用于IE8，FF9＆amp; 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...
    }
});

（必须使用一些小的黑客，只是因为内容在你的主机上，所以显然你可以删除你的页面的那些黑客）

Jquery Preloader停止了IE的工作

3 个答案: