码迷,mamicode.com
首页 > 其他好文 > 详细

预加载 img 的方式。

时间:2016-06-02 00:47:06      阅读:307      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!