图片的加载速度往往影响着网站整体的用户体验，尤其对于包含大量图片的网站。对图片进行预加载，不失为一个高效的解决方案。

预先加载可能会出现的图片，显示的时候就不会闪烁了，可以改善用户体验。

1、使用Ajax实现预加载

window.onload = function() {
	setTimeout(function() {
		// XHR to request a JS and a CSS
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.com/preload1.png');
		xhr.send('');

		xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.com/preload2.png');
		xhr.send('');
		
	}, 1000);
};

或者

// preload image
new Image().src = "http://domain.com/preload1.png";
new Image().src = "http://domain.com/preload2.png";

此处只讲js预加载，因为js预加载不会阻塞页面，性能更佳~