0
点赞
收藏
分享

微信扫一扫

开发常用技能 使用jQuery插件实现图片懒加载技术

Mezereon 2022-01-04 阅读 99

 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:图片已经下载完成,即将开始显示时的回调函数(参数同上)

前四个属性可以直接删除不使用

效果展示:

举报

相关推荐

0 条评论