图片优化策略

1、预加载（适用于静态图片加载）

对即将访问的页面在还未加载之前，先请求图片资源，访问页面的时候在显示。保证图片快速地、无缝地发布，给用户的体验就是加载的很“快”，页面打开的很“快”，但是其实对服务器的压力是没有减少的。

方法一、 css 背景图

原理：通过css的background属性，将图片预加载到屏幕外的背景上。只要图片的路径保持不变，当其他地方请求这个图片的时候，就会从缓存中取图片。 缺点： 会增加页面的整体加载时间，所以建议和js结合一起使用。
#preload-1 {
background: url('../../img/image-1.jpg') no-repeat -9999px -9999px;
}
#preload-4 {
background: url('../../img/image-4.jpg') no-repeat -9999px -9999px;
}
// css3的写法，可以用单个现有元素预加载所有所需的图片。
.preload-images {
background: url('../../img/image-1.jpg') no-repeat -9999px -9999px;
background: url('../../img/image-2.jpg') no-repeat -9999px -9999px,
url('../../img/image-3.jpg') no-repeat -9999px -9999px,
url('../../img/image-4.jpg') no-repeat -9999px -9999px,
url('../../img/image-5.jpg') no-repeat -9999px -9999px,
url('../../img/image-6.jpg') no-repeat -9999px -9999px
}

-9999px 是为了确保元素不显示这个背景图片。所以同理，若是元素不需要显示，给元素加上display: none;的效果也是一样的。

方法二：js 方法

原理：new Image(), 然后使用onload() 方法回调预加载完成事件，当浏览器把图片下载到本地后，之后同样的src就直接使用缓存。
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)

2、懒加载

给图片的src赋值为一张默认图片，当用户滚动到可视区域内，再去加载真正的图片。
<img src="../../img/loading.gif" data-src="../../img/image-4.jpg">
<img src="../../img/loading.gif" data-src="../../img/image-1.jpg">
<img src="../../img/loading.gif" data-src="../../img/image-2.jpg">
<img src="../../img/loading.gif" data-src="../../img/image-3.jpg">
<img src="../../img/loading.gif" data-src="../../img/image-5.jpg">
<img src="../../img/loading.gif" data-src="../../img/image-6.jpg">
<img src="../../img/loading.gif" data-src="../../img/image-7.jpg">
<img src="../../img/loading.gif" data-src="../../img/image-8.jpg">
<img src="../../img/loading.gif" data-src="../../img/image-9.jpg">
<img src="../../img/loading.gif" data-src="../../img/image-10.jpg">

function throttle(fn, delay, atleast) {//函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，
var timeout = null,//进行去抖处理
startTime = new Date();
return function() {
var curTime = new Date();
clearTimeout(timeout);
if(curTime - startTime >= atleast) {
fn();
startTime = curTime;
}else {
timeout = setTimeout(fn, delay);
}
}
}
function lazyload() {
var images = document.getElementsByTagName('img');
var len = images.length;
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < len; i++) {
if(images[i].offsetTop < seeHeight + scrollTop) {
if(images[i].getAttribute('src') === '../../img/loading.gif') {
images[i].src = images[i].getAttribute('data-src');
}
n = n + 1;
}
}
}
}
var loadImages = lazyload();
loadImages();
window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);