jquery 预加载图像答案

【问题标题】：jquery preload imagesjquery 预加载图像
【发布时间】：2009-10-15 22:27:16
【问题描述】：

好的，所以我有这个只包含一堆图片的“slideshow.html”和“index.html”。

index.html

<a href="">click</a>
<ul></ul>

幻灯片放映.html

<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>

我有这样的脚本；

$(document).ready(function(){
            $('a').click(function(){
            $('ul').append('<li id="preloader"><img src="preLoader.gif" /></li>');
                   $('ul').load('slideshow.html',function(){
                           $('#preloader').remove();
                   });
            });
});

所以我想单击以附加 preloader.gif 并调用 load 方法，并在图像形成 slideshow.html 后加载以删除动画。使用我的脚本它不会这样做；页面已加载，但动画在图像完全加载之前被删除:(谢谢

【问题讨论】：

标签： jquery image load preload

【解决方案1】：

$(document).ready(function(){
    //anchor click
$('a').click(function(){
    //empty the div
    $('div').empty();
            //perform ajax request
    $('div').load('toLoad.html',function(){
                  //hides all loaded images
        $('div.imageHolder img').hide();
                  //applies preloader for each image loaded
        $('div.imageHolder img').each(function(){
            //creates new image object
            var img = new Image();
                            //the current image src is stored in sursa variable
            var sursa = $(this).attr('src');
                            //the current image parent is stored in parent var 
            var parent = $(this).parent();
                            //the load animation is appended to current image parent 
            parent.append('<img src="blueLoader.gif" alt="loader" />');
           //loading image css settings
            $('img[alt="loader"]').css({'display':'block','margin':'10px auto'});
                           //this is the key
            $(img).load(function(){
                            //after image is loaded
                parent.append($(this));
                $(this).hide().fadeIn(500).css({'width':'200px','height':'80px'});
                $(this).siblings().remove();
            }).attr('src',sursa);


        });

    });
    return false;
}); 
   });

【讨论】：

kmunky，感谢您的示例代码。我遇到了一个类似的问题，发现您的代码非常有用！谢谢！

【解决方案2】：

预加载图像的方式与此不同。在 jQuery 中，它可以这样做（未经测试）：

$('<ul><li id="image1"><img id="throbber1" scr="preLoader.gif" /></li></ul>').appendTo('body');
var $img = $(new Image()).attr('src', '1.jpg').appendTo('ul li#image1');
$img.load(function() {
    $('#throbber1').hide();
});

【讨论】：