js实现图片预加载

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

阅读 11.2k
7 个回答

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

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

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

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

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

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

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

感谢各位的回答
我把

alert('开始获取图片);

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏