在前端开发中，图片懒加载是一种非常常见的技术，可以提高网站性能和用户体验。而使用 jquery_lazyload 这个 npm 包可以方便地实现图片懒加载效果。
安装
使用 npm 命令进行安装：
npm install jquery_lazyload
引入
在 HTML 文件中引入 jQuery 库和 jquery_lazyload 插件：
<script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script> <script src="./node_modules/jquery_lazyload/jquery.lazyload.js"></script>
使用
- 为需要懒加载的图片添加占位符
懒加载图片时，首先需要添加占位符，通常使用一张比较小的图片作为占位符。
<img class="lazy" data-original="img/example.jpg" src="img/placeholder.jpg">
其中，data-original 属性指定了原始图片的 URL，src 属性指定了占位符图片的 URL。
- 初始化插件
将 jquery_lazyload 绑定到需要懒加载的图片上，并通过参数配置插件的行为。
-- -------------------- ---- -------
------------ -
------------------------
------- ---------
---------- ----
-------------- ---
--------------- ------
------------ -----------------
---
---常用的参数有：
effect: 图片加载后的显示效果，默认为show。threshold: 当图片距离视窗边缘多少像素时开始加载，默认为0。failure_limit: 加载失败的重试次数，默认为1。skip_invisible: 是否跳过隐藏的图片，默认为true。placeholder: 加载中的占位符图片。
- 效果展示
可以通过滚动页面来触发需要懒加载的图片的加载，如下图所示：
总结
使用 jquery_lazyload 可以方便地实现图片懒加载效果，提高网站性能和用户体验。使用时需要注意设置好插件的参数，以达到最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32693
