js如何实现图片的预加载?需要兼容到IE6
网上有一种方式,代码是
function preload(url) {
var img = new Image();
img.src = url;
if(img.complete){
alert('图片有缓存');
}
else {
alert('开始获取图片');
img.onload = function() {
alert('图片获取成功');
};
}
}
这种方法在火狐和IE下onload事件都没有触发
有没有一种能兼容到IE6的方案?
高洛峰2017-04-10 14:38:41
给你说个思路,具体自己没去试验过,不过应该没问题
1.可以尝试建立隐藏的图片,通过他来加载图片
2.加载宽高为0的图片
3.加载飘出屏幕的图片
具体实现要看浏览器特性了,我没做过完整性测试,个人认为3.可行性最高
上面的方法都是通过dom来加载的,利用一些css技巧,让他正常提前加载,然后让用户看不到而已
不同的浏览器特性可能不同,也许三种方法没有哪一种支持所有的浏览器,但是浏览器总会支持其中的一种方法的,实在不行根据浏览器写hack,定能实现
PHPz2017-04-10 14:38:41
楼上都有了,各种预加载的插件,对于你代码的问题。
你需要把 img.src = url;
放到最后,先注册 onload 事件。这样子才能监听到你的事件,否则不会触发的。
不知道你为什么要实现预加载,我的建议是懒加载更好,需要用时再加载。
效果:http://ued.taobao.org/blog/