jquery: simple préchargeur d'image + onload

Question

J'essaie de faire un simple préchargeur d'image pour une seule image. il devrait charger une image et - si elle est terminée - déclencher un événement pour l'afficher. quelle est la méthode la plus simple pour cela? Je ne connais que la solution javascript pure, comme document.createElement ("img") - mais quelle est la meilleure méthode utilisant jquery?

ce que j'ai jusqu'à présent (mais ne sais pas si elle est la meilleure façon):

var img = $("<img src='/images/myPic.jpg'>"); 
img.bind("load", function(){alert("loaded!")}); 

grâce

Answer 1

Si je comprends bien, je voudrais écrire l'image dans la page du modèle ou maître ou tout utiliser avec un attribut css, puis un événement dans jquery pour l'afficher.

<img id="preloader" src="/myimg.jpg" style="display:none;" /> 


$("#some-element").ready(function(){ 
     $("#preloader").show(); 
}); 

Answer 2

Je n'ai jamais eu à faire avec jQuery que je soit le faire manuellement dans JS:

var img = new Image(); 
img.onLoad = function() {alert("Image has been loaded!");}; 
img.src = "path/to/img.ext"; 

Ou, si je suis déjà en utilisant jQuery pour le projet, je vais juste utilisez Thickbox. Si vous regardez sa source, il a quelque chose de similaire à ce qui précède. Pour l'afficher, ayez un div prédéfini dans votre fichier source qui est initialement défini pour afficher: none ;, puis utilisez JS pour définir son contenu sur l'image et le changer pour être visible. Vous pouvez voir un exemple de ceci au pcgalore.com, la bannière de citation rotatoire l'emploie.

Answer 3

J'utiliser la méthode de .on de jquery() et l'attacher au sélecteur:

<img id="preLoader" src="/images/myPic.jpg" alt="My Pic" style="display: none;" /> 

$('#preLoader').on('load', function() { 
    $(this).fadeIn(); 
});