懒加载 懒加载

懒加载也就是延迟加载。

具体表现为：

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张占位图的路径，这样就只需请求一次，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。

好处：

很多页面，内容很丰富，页面很长，图片较多。比如瀑布流，图片数量多且大，如果一次性加载完毕，用户等待时间过长。 懒加载页面加载速度快、可以减轻服务器的压力、节约了流量，用户体验好。

技术原理：

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。 懒加载的就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“pic-url”（自定义命名）属性里，要用的时候就取出来。

实现步骤：

1、不要将图片地址放到src属性中，而是放到其它属性中。

2、页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。

3、在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

 

 

预加载也就是提前加载图片

具体表现为：

当用户需要查看时可直接从本地缓存中渲染

好处：

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

实现预加载的方法：

方法一:用CSS和JavaScript实现预加载

方法二:仅使用javascript实现预加载

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

懒加载和预加载的区别

两种技术行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。