images jquery avec préchargement image

Question

$(document).ready(function(){ 
     // The plugin 
     $.fn.image = function(src, f){ 
     return this.each(function(){ 
       var i = new Image(); 
         i.src = src; 
         i.onload = f; 
         this.appendChild(i); 
       }); 
     } 

     // The code for the image to load 
    $("#asdf").image("images/3a.jpg",function(){ 
      alert("The image is loaded now"); 
     });  
}); 

ive a trouvé le code ci-dessus. Je veux avoir un élément qui peut être chargé avec une image, mais avant que l'image soit complètement chargée, je veux qu'elle affiche un gif de chargement, (fait cela en utilisant css). Cela fonctionne mais montrera le chargement d'image au lieu d'attendre qu'il soit complètement chargé. Je pense que je devrais montrer l'image où l'alerte utilise hide() show() mais je ne sais pas trop comment le référencer depuis l'intérieur de la fonction?

---

ive essayé ceci sans la moindre chance, quelqu'un voit-il des problèmes>? je veux utiliser le même div pour le gif de chargement, puis l'image finale

$('#preload').replaceWith('<img src="preloader.gif" />') 
      .image("http://www.google.co.uk/intl/en_uk/images/logo.gif", function() { 
      $('#preload').replaceWith(this); 
      // is this called when image fully loaded? 
      }); 

Answer 1

Vous pouvez essayer d'utiliser le plug-in Lazy Loader (ou similaire) à la place. Notez que vous pouvez spécifier votre propre image d'espace réservé.

Answer 2

Vous pouvez essayer quelque chose comme ceci:

var $loadingImg = $('<img />').attr('id','loadingImg').attr('src','preloader.gif'); 
    $("#preload").html($loadingImg.html()).image("http://www.google.co.uk/intl/en_uk/images/logo.gif"); 

faites-moi savoir comment ça se passe.

Answer 3

trouvé un plug-in qui fait exactement ce que je cherche, en utilisant une image gif espace réservé jusqu'à ce que l'image est alors entièrement chargée montrant l'image finale

http://flesler.blogspot.com/2008/01/jquerypreload.html