阿Q日记大型网站如常用的淘宝，京东等页面，需要展示大量的商品图片信息，如果打开网页时让所有图片一次性加载完成，需要处理很多次网络请求，等待加载时间比较长，用户体验感很差。
有一种常用的解决方式是：随着滚动动态加载，即图片的惰性加载。视图之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示。
对于不少站长来说，网站平时都要各种优化，其中图片的使用，也是必不可少，但是如果使用的过多，而服务器配置不高的话，可能会影响网页的打开速度，影响了体验了效果，那么有没有在使用图片多的时候，能提高网页的访问速度吗？如果不想提高服务器配置的话，可以试试懒加载。
懒加载也叫延迟加载，顾名思义，指的是在网页中延迟加载图片的时机，当用户需要访问网页时，先让网页加载出来，让浏览器把其他的内容渲染出来，然后在访问的过程中加载图片，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。
懒加载，页面很长的网站场景，如果服务器速度比较慢的时候，就能明显感觉到懒加载的优势了。
懒加载的实现原理，其实也简单，将页面上的图片的src属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的src属性，以此来实现图片的延迟加载。这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。
初始化时，图片标签的src不能是真实的图片地址，也不可以是空地址或者坏地址(会出现图片加载失败的图标)。
初始化的时候，可以设置图片的src是某一个小型图片。例如一张1px*1px的透明图片。由于所有图片都使用这一张图片，只会发送一次请求，不会增加性能负担。
将图片的真实路径绑定给一个自定义属性，例如data-url。注意：页面的img元素，如果没有src属性，浏览器就不会发出请求去下载图片
<img data-url=”xxx” src=”1px.gif” width=”100″ height=”100″/>
定义滚动事件，判断元素进入视口，则将src替换为真正的url地址。利用js提取data-url的真实图片地址赋值给src属性
以前想让网站图片懒加载，都是通过JS来实现，网上也有人写相应的代码或插件，有一些网站主题集成了懒加载的JS，其实从Chrome76开始（2019年发布），谷歌浏览器内核原生支持懒加载属性，直接在img标签里面加上【loading=”lazy”】属性，浏览器会自动实现懒加载。
如果所使用的主题，已经集成了懒加载的标签，就就非常方便了，不用挨个设置了，如果主题里面没有，而还想使用懒加载的话，如果自己懂技术，可以通过修改主题加上懒加载，或者在文章添加图片的同时，在图片代码里，加上一段【loading=”lazy”】属性，也能实现懒加载的效果。
我们在自己做网站时，也可以实现LazyLoad按需加载，增强网站的用户体验。下面学做网站论坛就来介绍一下LazyLoad按需加载实现方法。（以下会使用到HTML代码，如果对代码不熟悉，可以学习一下html视频教程）
引入LazyLoad按需加载必须的二个文件：jquery.js和jquery.lazyload.js。引入方法很简单，只需将下面的代码放到</head>标签上方即可；
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js"></script>
网站上所有图片都使用以下的格式书写：
<img class="lazy" src="" data-original="图片地址" width="100" height="100" alt="">
在网站的</body>标签上面，放上以下的JS代码，来实现LazyLoad按需加载（懒加载）；
<script type="text/javascript"> $(function() { $("img.lazy").lazyload({ threshold : 200, // 设置阀值 effect : "fadeIn" // 设置图片渐入特效 }); }); </script>
这样，我们自己在建网站时，也可以轻松实现LazyLoad按需加载（懒加载）了。快去自己的网站上试试吧！
原文地址：https://www.shuyong.net/chengxu/1108.html
