首页 > 其他 > 详细

预加载 img 的方式。

时间:2016-06-02 00:45:34      阅读:142      评论:0      收藏:0      [点我收藏+]

原生方式:

var img = new Image();

img.onerror = function() {
    alert(‘img error‘);
};

img.onload = function() {
    img.onerror = img.onload = null;
    alert(‘img loaded‘);
};

img.src = ‘http://s1.bdstatic.com/r/www/cache/static/global/img/icons_1529edac.png‘;

jQuery:

var $img = $(‘‘);
$img.one(‘error‘, function(){
    alert(‘jquery img error‘);
});
$img.one(‘load‘, function(){
    alert(‘jquery img loaded‘);
});
$img.attr(‘src‘, ‘http://s1.bdstatic.com/r/www/cache/static/global/img/icons_1529edac22.png‘);

如果要判断这个图片已经加载过的,可以用 img.complete, 如果为 true,加载完毕;false 未加载。

但是 在 IE9 IE8 IE7 IE6 下,如果 只用(new Image()).src = ‘xxx.jpg‘,而并没有把 img appendTo body 里,图片就算加载完毕,但 img.complete 始终为 false, 而chrome 和 firefox 不需要 appendTo body,图片加载完以后 img.complete 为true。

而在 IE 和 chrome FF 下,img 就算没有 appendTo body, fiddler 抓包 图片也是 304 Not Modified,说明图片有总是有被加载。

预加载 img 的方式。

原文:http://www.cnblogs.com/zhengming2016/p/5551505.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!