浅谈关于懒加载以及预加载

（整理自以前的博客）
之前只是听过这两者，并不知道如何使用，也不知道它们之间的区别。
其实现在看来都可以用一句话概括，懒加载是使用时再加载资源，可以提升加载速度，减轻服务器压力，提高用户体验；预加载是提前加载资源，对于图片数量大的网站极具优势，保证了图片快速展示，牺牲服务器性能去提升用户体验。
接下来我们详细看一下这两种加载方式：

1.懒加载
（1）懒加载的实现：懒加载就是访问页面时，先把图片换成1×1px的占位符，只有图片出现在浏览器可视区域时，设置真正的路径，图片正常显示。

（2）使用懒加载的好处：有一种页面比如电商网站，图片特别多，如果一次性加载完毕，就会使用户等待很长时间。

（3）懒加载原理：先在页面中把所有的图片统一使用一张占位图进行占位，把路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置。

（4）实现步骤：

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

2.预加载
1)预加载就是提前加载图片，用户查看时可直接从本地缓冲中渲染。

(2)使用预加载的好处：对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

(3)实现预加载的方法：详见
方法一：用CSS和JavaScript实现预加载

方法二：仅使用JavaScript实现预加载

方法三：使用Ajax实现预加载