懒加载和预加载

1.什么是懒加载？

懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或是其余元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出如今浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

2.懒加载的原理是什么？

页面中的img元素，若是没有src属性，浏览器就不会发出请求去下载图片，只有经过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把全部的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”属性里，要用的时候就取出来，再设置；

3.懒加载的实现步骤？

1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，若是在，则将data-original属性中的值取出存放到src属性中。
3)在滚动事件中重复判断图片是否进入视野，若是进入，则将data-original属性中的值取出存放到src属性中。

4.懒加载的优势是什么？

页面加载速度快、能够减轻服务器的压力、节约了流量,用户体验好

 

二、预加载

1.什么是预加载？

提早加载图片，当用户须要查看时可直接从本地缓存中渲染

2.为何要使用预加载？

图片预先加载到浏览器中，访问者即可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来讲十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时得到更好的用户体验。

3.实现预加载的方法有哪些？

方法一：用CSS和JavaScript实现预加载
方法二：仅使用JavaScript实现预加载
方法三：使用Ajax实现预加载

详见：http://web.jobbole.com/86785/