image pré-charge et de montrer une fileuse lors du chargement

Question

Hy,

j'utilise Uploadify télécharger des images, après que j'afficher tous les pouces images dans une liste, quand je clique sur un pouce d'image une plus grande image, il est ouvert dans une div avec cette fonction

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

voici ma liste de photos:

<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> 

c'est la div où les images apparaissent

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

comment puis-je précharger l'image avant qu'elle ne s'affiche?

Answer 1

Vous pouvez en quelque sorte exploiter l'événement load, par exemple:

$(".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

Voici comment vous pouvez précharger des images dans 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) 

puis vous les précharger comme ceci:

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

Answer 3

Vous pouvez utiliser mon plugin imgPreload qui, lors du préchargement d'une image d isplays un bon spinner.

Dans votre cas, vous juste besoin d'ajouter une ligne à votre code existant:

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

S'il vous plaît voir cette page http://denysonique.github.com/imgPreload/ pour une démonstration et la documentation.