Comment s'assurer que les images sont chargées dans un plugin JQuery?

Question

Lors de la création d'un plugin JQuery qui nécessitait des dimensions d'image, j'ai découvert que les navigateurs Webkit comme Chrome renvoient souvent 0 taille pour les images car ils sont chargés en parallèle.

Ma solution rapide et sale était d'envelopper le code qui appelle mon plugin dans un événement $(window).load():

$(document).ready(function() { 
    $(window).load(function() { 
     $('.magnifier').magnifier(); 
    }); 
}); 

Comment pourrais-je aller sur la mise en œuvre de cette intérieur du plug-in lui-même? Quel est le moyen le plus propre de détecter que les images ont été chargées afin de pouvoir mesurer leurs dimensions?

Answer 1

Les images ont une charge() événement, de sorte que vous pouvez faire quelque chose comme:

$(document).ready(function() { 
    $('.magnifier').magnifier(); 
}); 

$.fn.magnifier = function() { 
    return this.each(function() { 
     $(this).find('img').load(function() { 
      // do something to image when it is loaded 
     }); 
    }); 
} 

Vous pouvez aussi simplement envelopper le code autour window.load à l'intérieur du plugin lui-même:

$.fn.magnifier = function() { 
    var that = this; 
    $(window).load(function() { 
     that.each(function() { 
      $(this).find('img').each(function() { 
       // image would be loaded at this point 
      }); 
     }); 
    }); 
    return this; 
} 

Answer 2

I Je ne suis pas sûr de comprendre complètement, mais cela se déclenchera une fois toutes les images chargées.

$("img").load(function() { 

});