预加载 img 的方式。

Posted 2020-07-18 Hello World

原生方式:

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，说明图片有总是有被加载。