图片懒加载与预加载

1.懒加载

认识一个新的东西，那么就从what、why开始。即想要了解图片懒加载技术，那么先了解什么是懒加载？为什么需要用到懒加载？

1.1什么是懒加载?

懒加载又称延迟加载。当访问一个页面的时候，需要先把img元素或者其他元素的背景图先用一张默认的图片代替（占位图），这样子

浏览器渲染页面的时候就只需请求一次。当图片出现在浏览器可视区域的时候，才设置图片的真实路径，把图片显示出来。

1.2为什么要使用图片懒加载？

当页面中图片的数量多到一定数量的时候，并且图片大小比较大，比如各种商场网站，图片素材网等等。如果在页面一加载的时候就

加载全部图片，显然会影响网站加载速度和加大服务器负担，而且用户体验也必然不好，那么这时候可以采用懒加载。

1.3 懒加载具体实现原理

页面中的img元素之所以会发送http请求的原因是设置了src属性，否则浏览器就不会发送请求去下载这个图片。首先在页面中把所有

的图片用一张占位图进行占位，并且在元素下设置data-src自定义属性，存放图片的真实路径，当需要用到的时候取出该真实路径动

态添加给src。

2.预加载

2.1.什么是预加载？

预加载就是提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2.2 为什么要使用预加载？

当页面中图片比较大的时候，页面加载的时候会出现该区域空白的效果或者看到图片正在慢慢地加载出来，为了提高用户体验，需

要把这些图片提前加载到缓存中，当用户一打开页面的时候，这些图片就会快速的呈现出来，获得更好的用户体验效果。

2.3实现方式有哪些？

方法1：使用css和JavaScript实现预加载

方法2：只使用JavaScript实现预加载

方法3：使用ajax实现预加载

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

3.懒加载和预加载的区别以及具体实现方式

两种技术的行为是相反的，一个是提前加载，一个是延迟加载或者不加载。懒加载对于服务器来说是有好的，可以缓解一定的压

力。而预加载则相反，会增加服务器的负担。

懒加载具体实现方式：

1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.

2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。

3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍

开始加载，这样能保证用户拉下时正好能看到图片。

预加载具体实现方式：

实现预载的方法非常多，比如：用CSS和JavaScript实现预加载；仅使用JavaScript实现预加载；使用Ajax实现预加载。

常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会

使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法

是用记时器轮循宽高变化。