网页加载图片处理

如果你的网页使用了很多隐藏图片文件（例如：鼠标悬停展示的图片），那么图片的预加载是有意义的：
$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('<img>').attr('src', arguments[i]);
 }
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');<br>

判断图片是否加载完

有时候你可能需要检查图像是否已经加载完成，以便于可以继续执行相应的js代码：
 
$('img').load(function () {
 console.log('image load successful');
});
 

曾经遇到过的使用场景：有些元素需要按图片的实际尺寸来设置其大小，以绝对布置方式放置。元素的大小设置可以在图片加载完成后计算。

自动修补破损图像
如果你碰巧发现在你的网站上发现破损的图像链接，一个个去替代他们是痛苦的。这个简单的代码可以节省很多的麻烦：

$('img').on('error', function () {
 if(!$(this).hasClass('broken-image')) {
 $(this).prop('src', 'img/broken.png').addClass('broken-image');
 }
});
 

即使你没有任何断开的链接，加入这代码也不会有任何影响。