当我们的网页中涉及到很多图片，falsh资源 , iframe, 网页编辑器等时，这些资源会占用很大的带宽，我们除了压缩资源减小其占用的带宽等，还有什么更高效的方法能够大大减轻服务器的压力呢?
我们会发现平时我们加载网页时不做处理的话一般都是一次性加载当前页面的全部资源，当我们页面的图片过多的时候或者有一些占用资源很大的文件时，网页加载的速度是非常慢的，而又有许多的资源是当前窗口上面看不见的，这种当前窗口中暂时不会显示的资源就会使得网页加载得很慢，让用户等待太久，那么我们有什么办法可以暂时不加载窗口以外的图片资源，而只加载我们当前窗口中的图片资源呢?
这里小白为有这种需求的站长推荐使用EasyLazyload.js插件，它可以在适当的时候加载该类资源.避免网页打开时加载过多资源，而且不会对样式有任何影响，且队列式加载，不会影响页面效率，不需要设置任何宽高，简单易用，很好的满足了以上的需求！
推荐下载地址：EasyLazyload.js 超好用js图片延迟加载 (jq22.com)
这里也简单介绍一下该插件的使用：
先下载好 EasyLazyload.js，推荐使用EasyLazyload.min.js
第一步：先引入jQuery
下面为在线jQuery的引入<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
第二步：引入 EasyLazyload.js/EasyLazyload.min.js
<script src="../js/EasyLazyload.min.js"></script> 具体引入路径以自己的文件路径为准
注意的是这里引用需要写在整个项目body的最下方，不然使用不了（目前是这样，以后可能会发生呢个变化）
第三步：
将要使用懒加载的页面源代码中的图片 src 全部替换为 data-lazy-src
如下图所示：
<img data-lazy-src="..." /> |
调用全局方法
lazyLoadInit(） |
第四步：在引入的<script src="js/EasyLazyload.min.js"></script>下面复制粘贴上以下代码
示例代码
<script> lazyLoadInit({ coverColor:"white", coverDiv:"<h1>test</h1>", offsetBottom:0, offsetTopm:0, showTime:1100, onLoadBackEnd:function(i,e){ console.log("onLoadBackEnd:"+i); } ,onLoadBackStart:function(i,e){ console.log("onLoadBackStart:"+i); } });</script> |
参数列表
-
coverColor：图片即将显示时覆盖层的颜色
-
coverDiv：图片即将显示时覆盖层可显示的土自定义组件
-
offsetBottom：图片距离屏幕底部出现时间点的距离差值（注解：延迟加载图片会在图片顶部接触屏幕底部时出现，如果想要让图片顶部距离屏幕底部有一定距离时出现，请设置此值）
-
offsetTopm：图片距离屏幕底部出现时间点的距离差值（注解：同上，距离顶部）
-
onLoadBackEnd：图片已经完全出现时的回调函数，参数为（index，event）加载的图片下标，以及dom对象（dom对象为jquerydom或zeptodom对象）
-
onLoadBackStart：图片已经下载完成，即将开始显示时的回调函数（参数同上）
.jpg)
在线客服