lazyload插件是什么以及使用的步骤

lazyload插件是什么以及使用的步骤

lazyload插件是什么

lazyload懒加载插件用于在较长HTML页面中延迟加载图片。在浏览器窗口之外的图片不会被加载，直到用户操作滚动条滚动到这些图片时才会被加载。

lazyload插件的优点：

• 可以提高HTML页面加载速度
• 可以帮助减少服务器负载

lazyload插件的官网地址：https://appelsiini.net/projects/lazyload

如何使用lazyload插件

1.lazyload插件的使用是依赖于jQuery的，所以必须按照顺序进行引入：

<script src="js/jquery-1.12.4.js"></script>
<script src="js/lazyload/jquery.lazyload.js"></script>

2.``元素通过data-original属性设置图片的真实路径，并为添加class属性值为lazyload方便JavaScript定位并操作：

<img class="lazyload"data-original="img/example.jpg"width="765"height="574">

注意：必须为图片设置宽度和高度，否则lazyload插件可能无法正常工作。

3.获取所有需要lazyload插件懒加载的图片元素，调用lazyload()核心方法：

$("img.lazyload").lazyload();