预加载图像，并显示出微调而载入

Question

海兰，

我使用uploadify上传一些图片，之后我在列表中显示的所有图像大拇指，当我在一个像拇指点击一个更大的图像很开放div使用该功能

$(".thumbs li a").click(function(){ 
    var largePath = $(this).attr("href"); 
    $('.thumbs li').removeClass('thumbac'); 
    $(this).parent().addClass('thumbac'); 
    $("#largeImg").attr({ src: largePath }); 
    return false; 
}); 

这里是我的照片列表：

<div class="upimage"> 
    <ul id="upimagesQueue" class="thumbs"> 
    <li id="liupimages"> 
     <a href="uploads/0001.jpg"><img src="uploads/0001.jpg" alt="0001.jpg" id=""></a> 
    </li> 
    <li id="liupimages"> 
     <a href="uploads/0002.jpg"><img src="uploads/0002.jpg" alt="0002.jpg" id=""></a> 
    </li> 
    <li id="liupimages"> 
     <a href="uploads/0003.jpg"><img src="uploads/0003.jpg" alt="0003.jpg" id=""></a> 
    </li> 
<script> 
$(".thumbs li a").click(function(){ 
    var largePath = $(this).attr("href"); 
    $('.thumbs li').removeClass('thumbac'); 
    $(this).parent().addClass('thumbac'); 
    $("#largeImg").attr({ src: largePath }); 
    return false; 
}); 
</script> 
    </ul> 
</div> 

这是那里的图像出现

股利

<div class="largeImg" >  
    <img id="largeImg" src="" /> 
</div> 

如何在显示之前预加载图像？

Answer 1

你能以某种方式驾驭load事件，如：

$(".thumbs li a").click(function(){ 
    var largePath = $(this).attr("href"); 
    $('.thumbs li').removeClass('thumbac'); 
    $(this).parent().addClass('thumbac'); 
    $("#largeImg").hide() 
        .attr({ src: largePath }) 
        .load(function() { 
         $(this).show(); 
        }); 
    return false; 
}); 

Answer 2

这里是如何在JQ预载图片：

(function($) { 
    var cache = []; 
    // Arguments are image paths relative to the current page. 
    $.preLoadImages = function() { 
    var args_len = arguments.length; 
    for (var i = args_len; i--;) { 
     var cacheImage = document.createElement('img'); 
     cacheImage.src = arguments[i]; 
     cache.push(cacheImage); 
    } 
    } 
})(jQuery) 

，然后你预装他们是这样的：

jQuery.preLoadImages("image1.gif", "/path/to/image2.png"); 

Answer 3

您可以使用我的插件imgPreload，它虽然预载图像d isplays一个不错的微调。

你的情况，你只需要一行添加到您的现有代码：

$("#largeImg").attr({ src: largePath }); //your code 
$("#largeImg").imgPreload() //the extra line 

请参见本页面http://denysonique.github.com/imgPreload/用于演示和文档。