似乎如果图片之前已经被缓存,.load()函数就不会触发。因此,如果你想确保在加载和显示另一张图片(比如放大镜)之前已经加载了某个图片,你不能像这样做:
$(img_to_load_first)
.load(
$(img_to_load_last)
.src("2nd.png");
)
.src("1st.png");
那么如何确保在JQuery中按顺序加载呢?
似乎如果图片之前已经被缓存,.load()函数就不会触发。因此,如果你想确保在加载和显示另一张图片(比如放大镜)之前已经加载了某个图片,你不能像这样做:
$(img_to_load_first)
.load(
$(img_to_load_last)
.src("2nd.png");
)
.src("1st.png");
complete
来验证载入。$('.load_selector').each(function(){
if (!this.complete) {
$(this).load(function(){
// handle image load event binding here
});
} else {
// handle image already loaded case
}
});
this
(单独使用)是指由jQuery提供的图像对象的DOM引用。else
子句中触发加载处理程序。 - sparkey0谢谢Sparkey,
我会尝试一下,但看起来很不错。我在这里找到了一篇关于这个主题的广泛讨论:http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm
这引导我找到了“jQuery 'onImagesLoad'插件”:http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1/documentation/
它似乎可以通过以下方式解决问题:
$imgs.each(function(i, val){
$(this).bind('load', function(){
// ...
}).each(function(){
if (this.complete || this.complete === undefined){ this.src = this.src; } //needed for potential cached images
});
});
$.fn.imagesLoaded = function () {
var def = $.Deferred();
var count = this.length;
this.each(function () {
if (this.complete) {
if (!--count) {
def.resolve();
}
} else {
$(this).load(function () {
if (!--count) {
def.resolve();
}
});
}
});
return def.promise();
}
然后只需像这样使用:
$(img_to_load_first).imagesLoaded().done(function () {
$(img_to_load_last).src("2nd.png");
});
你也可以检查图片的宽度或高度来判断它是否已经加载。
例如:
var img = _content.find('img');
if(img[0].width >0 || img[0].height > 0 ) {
console.log('already loaded image');
} else {
img.on('load', function() {
console.log('image loaded');
});
}