1.下载插件
官网地址: https://www.jq22.com/
进入官网直接搜索懒加载就可以找到一个叫 EasyLazyload 的插件单击进入下载即可
插件有很多 找到自己喜欢的可以查看演示 ,找到需求点击下载插件
点进去往下滑动有详细介绍怎么使用
2.使用插件
下载解压文件夹 找到dist的文件双击进去
找到 名字为 EasyLazyload.min.js 的js文件 赋值到自己的js文件夹里面去 只需要引入这一个文件
找到index.html的文件双击在浏览器显示 鼠标右击页面查看源代码
建立自己的文件
复制这些内容到自己的html文件里面
注意这些代码和引入的js文件一定放当</body> 的上面 并且页面必须进入了jq的1.0或2.0或3.0版本的js文件
注意点: 需要将自己所写的页面的里面所有的img的src属性改为data-lazy-src
小技巧:在html文件里按 Ctrl + H 替换文本 上面输入 <img src= 下面替换为 <img data-lazy-src= 点击全部替换
-
coverColor:图片即将显示时覆盖层的颜色
-
coverDiv:图片即将显示时覆盖层可显示的土自定义组件
-
offsetBottom:图片距离屏幕底部出现时间点的距离差值(注解:延迟加载图片会在图片顶部接触屏幕底部时出现,如果想要让图片顶部距离屏幕底部有一定距离时出现,请设置此值)
-
offsetTopm:图片距离屏幕底部出现时间点的距离差值(注解:同上,距离顶部)
-
onLoadBackEnd:图片已经完全出现时的回调函数,参数为(index,event)加载的图片下标,以及dom对象(dom对象为jquerydom或zeptodom对象)
-
onLoadBackStart:图片已经下载完成,即将开始显示时的回调函数(参数同上)
前四个属性可以直接删除不使用