图片的懒加载和预加载？

一、写在前面
图片的懒加载和图片的预加载都是前端性能优化的一个方案，当然可能存在不同的应用场景，下面我们将总结一下这两个方案。
二、图片懒加载
图片的懒加载是什么？
图片的懒加载指的是在长网页中延迟加载图像，是一种很好的优化网页性能的方式。用户滚动到他们之前，可视区域之外的图像是不会加载的。在某种情况下，他还可以帮助减少服务器负载，常适使图片很多，页面很长的电商网站场景中。
为什么要使用懒加载?

可以提升用户体验：我们可以想一下，当用户打开手机淘宝的话，如果页面上全部的图片都需要加载，由于图片
数量巨大，等待的时间就很长，用户体验就很不好。
减少无用的资源加载：如果用户都没有去查看相应的内容，而我们却需要加载，此时就会增加浏览器的负担。
防止并发资源过多导致阻塞js的加载。

懒加载的实现原理

首先先将页面上的图片的src地址设置为空字符串，而图片上的真实路径设置在data-original属性中，当页面
发生滚动时需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域，如
果图片在可视区域的话将src设置为data-original的值，这样就达到了延迟加载的效果。

三、预加载
什么是预加载

预加载就是将所需的资源提前加载到本地，这样当用户使用到该资源时，就会自动从缓存中取出。

预加载实现方法
1、用html标签

<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>
这样当我们进行加载页面时，也会加载src中的图片资源，此时该图片就会缓存到本地，当我们使用到该图片
时，就会自动读取缓存中的内容。

2、使用Image对象

<script src='./myPreload.js'></script>

//myPreload.js文件
var image = new Image()
image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"

3、使用XMLHTTPRequest对象

这里我是这样理解的，因为XMLHTTPRequest创建的是异步ajax请求对象，当我们加载完其他内容时，此时我们
可以使用ajax进行加载资源，此时并不会对页面产生不好的效果。此时当我们加载完毕后，在后面如果我们使用
到该资源时，就会从缓存中读取出来，加载就会很快。

四、懒加载和预加载的对比

两者都是提高页面性能的有效方法，懒加载是迟缓加载或者是不进行加载，预加载是提前加载。但是预加载会增
加服务器压力。