javascript - js实现图片预加载

Question

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的方案？

Answer 1

给你说个思路，具体自己没去试验过，不过应该没问题

1.可以尝试建立隐藏的图片，通过他来加载图片
2.加载宽高为0的图片
3.加载飘出屏幕的图片

具体实现要看浏览器特性了，我没做过完整性测试，个人认为3.可行性最高
上面的方法都是通过dom来加载的，利用一些css技巧，让他正常提前加载，然后让用户看不到而已
不同的浏览器特性可能不同，也许三种方法没有哪一种支持所有的浏览器，但是浏览器总会支持其中的一种方法的，实在不行根据浏览器写hack，定能实现

Answer 2

https://gist.github.com/hehongwei44/5ab040cf3a8b27311d72

腾讯以高手写的 预加载

Answer 3

楼上都有了，各种预加载的插件，对于你代码的问题。

你需要把 img.src = url; 放到最后，先注册 onload 事件。这样子才能监听到你的事件，否则不会触发的。

不知道你为什么要实现预加载，我的建议是懒加载更好，需要用时再加载。

效果：http://ued.taobao.org/blog/

Answer 4

感谢各位的回答
我把

alert('开始获取图片);

这句去掉就所有浏览器都可以执行onload上绑定的函数了，但是不知道为什么

Answer 5

img.complete 没有问题，所有浏览器全兼容

Answer 6

试试iFrame？
http://segmentfault.com/a/1190000004336839