Ma solution simple, elle n'a besoin d'aucun plugin externe et pour les cas courants devrait suffire:
/**
* Trigger a callback when the selected images are loaded:
* @param {String} selector
* @param {Function} callback
*/
var onImgLoad = function(selector, callback){
$(selector).each(function(){
if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
callback.apply(this);
}
else {
$(this).on('load', function(){
callback.apply(this);
});
}
});
};
utilisez-le comme ceci:
onImgLoad('img', function(){
// do stuff
});
par exemple, pour estomper vos images au chargement, vous pouvez faire:
$('img').hide();
onImgLoad('img', function(){
$(this).fadeIn(700);
});
Ou comme alternative, si vous préférez une approche de type plugin jquery:
/**
* Trigger a callback when 'this' image is loaded:
* @param {Function} callback
*/
(function($){
$.fn.imgLoad = function(callback) {
return this.each(function() {
if (callback) {
if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
callback.apply(this);
}
else {
$(this).on('load', function(){
callback.apply(this);
});
}
}
});
};
})(jQuery);
et utilisez-le de cette manière:
$('img').imgLoad(function(){
// do stuff
});
par exemple:
$('img').hide().imgLoad(function(){
$(this).fadeIn(700);
});