使用对象数组预加载图像
Preload images using an array of objects
我想写预加载器图像,但我被困在检查已经是lodead图像上:
var imgContainer = [];
$(this).find('img').each(function() {
imgContainer.push({
image: $(this)
// other properties
})
});
setInterval(function() {
console.log(imgContainer[0].image.complete); // undefined
}, 2000);
但是这个解决方案有效(数组中没有对象):
var imgContainer = $(this).find('img');
setInterval(function() {
console.log(imgContainer[0].complete) // true
}, 2000);
为什么它不起作用?
不要使用 setInterval
来检查是否加载了所有图像,只需将上面的代码替换为以下代码:
(function(that){
var remains = 0;
var loadHandler = function(){
if(--remains == 0){
console.log('All images are loaded !!!');
}
};
$(that).find('img').each(function() {
if( !this.complete ){
remains++;
$(this).load(loadHandler);
}
});
})(this);
在你的代码中,你试图访问jQuery对象上的'complete'属性,而它没有这个。尝试改为访问 DOM 元素本身的完整属性。
我相信这段代码应该更好地工作:
var imgContainer = [];
$(this).find('img').each(function() {
imgContainer.push({
image: $(this)
// other properties
})
});
setInterval(function() {
/* imgContainer = array with objects, [0] = get first element */
/* image = jQuery collection, [0] = get dom element of the first item in the collection */
console.log(imgContainer[0].image[0].complete);
}, 2000);
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 预加载图像并插入DOM
- 加载图像时加载图标
- 在页面启动期间加载图像
- 预加载图像image.onload脚本MVC
- 可以't在我的React组件中加载图像
- 加载图像后调整HTML画布的大小
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 错误:$injector:modulerr加载图像时模块处于角度
- 谷歌地图加载后隐藏加载图像
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 正在从字节数组加载图像内容
- 网页上已有tinymce加载图像列表
- 单击提交按钮后加载图像将冻结
- 如何使用Express'正确加载图像;s的静态中间件
- 使用jquery即时加载图像
- Html5画布使用JCanvasScript加载图像
- Javascript使用JCanvaScript在画布中加载图像
- 使用jquery/ajax显示加载图像
- ajax缓存false无法加载图像