預加載圖像，並顯示出微調而載入

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/用於演示和文檔。