如何判断JQuery中是否加载或缓存了图片？
如果图像之前已被缓存，则.load()函数似乎不会触发。因此，如果你想确保在加载和显示另一个图像之前已经加载了一个图像(即放大镜)，你不能这样做：
$(img_to_load_first)
.load(
$(img_to_load_last)
.src("2nd.png");
)
.src("1st.png");那么如何确保JQuery中的加载顺序呢？
回答 4
Stack Overflow用户
发布于 2009-12-23 03:52:32
你需要做的就是有选择地处理你的负载绑定。您可以通过测试图像对象属性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引用。
Stack Overflow用户
发布于 2015-03-04 01:28:28
如果您想将所有这些功能包装在一个jQuery扩展方法中，可以尝试这个方法(它应该可以在等待任意数量的图像时使用)：
$.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");
});Stack Overflow用户
发布于 2009-12-24 02:21:36
谢谢斯帕奇
我会试一试，但它看起来不错。我在这里找到了关于这个主题的广泛讨论：http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm
在这里找到"jQuery 'onImagesLoad‘Plugin“：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
});
});这很大程度上归结为你所说的，只有他完成的检查也测试“未定义”。
https://stackoverflow.com/questions/1948672
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号