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的方案?
给你说个思路,具体自己没去试验过,不过应该没问题
具体实现要看浏览器特性了,我没做过完整性测试,个人认为3.可行性最高
上面的方法都是通过dom来加载的,利用一些css技巧,让他正常提前加载,然后让用户看不到而已
不同的浏览器特性可能不同,也许三种方法没有哪一种支持所有的浏览器,但是浏览器总会支持其中的一种方法的,实在不行根据浏览器写hack,定能实现
https://gist.github.com/hehongwei44/5ab040cf3a8b27311d72
腾讯以高手写的 预加载
楼上都有了,各种预加载的插件,对于你代码的问题。
你需要把
img.src = url;
放到最后,先注册 onload 事件。这样子才能监听到你的事件,否则不会触发的。不知道你为什么要实现预加载,我的建议是懒加载更好,需要用时再加载。
效果:http://ued.taobao.org/blog/
感谢各位的回答
我把
这句去掉就所有浏览器都可以执行onload上绑定的函数了,但是不知道为什么
img.complete 没有问题,所有浏览器全兼容
试试iFrame?
http://segmentfault.com/a/1190000004336839