我的簡(jiǎn)單解決方案,它不需要任何外部插件,對(duì)于普通情況應(yīng)該足夠了:
/**
* 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);
});
}
});
};
像這樣使用它:
onImgLoad('img', function(){
// do stuff
});
例如,要在加載時(shí)淡出圖像,可以這樣做:
$('img').hide();
onImgLoad('img', function(){
$(this).fadeIn(700);
});
或者,如果您更喜歡類似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);
并以這樣的方式使用:
$('img').imgLoad(function(){
// do stuff
});
例如:
$('img').hide().imgLoad(function(){
$(this).fadeIn(700);
});