vue-lazyload的使用
https://www.npmjs.com/package/vue-lazyload
首先我们先在npm上下载vue-lazyload的包
1 | npm install vue-lazyload --save |
然后我们在main.js里面import这个包,当然,单单这一个包是不够的,还得其他的文件
1 2 3 | import Vue from 'vue' import App from '@/App' import VueLazyload from 'vue-lazyload' |
然后我们配置vue-lazyload;
我是这样写的
1 2 3 4 5 | Vue.use(VueLazyload, { error: 'dist/error.png' , //这个是请求失败后显示的图片 loading: 'dist/loading.gif' , //这个是加载的loading过渡效果 try : 2 // 这个是加载图片数量 }) |
官方给出的具体配置api可以看下图
然后在组件里写法是
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <template> <div id= "rj" > <ul id= "container" > <li v- for = "img in list" > <img v-lazy= "img" > </li> </ul> </div> </template> <script> export default { data () { return { list: [ 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb' , 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb' , 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb' , 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb' , 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb' , 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb' , 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb' , ] } } } </script> |
这样就可以在页面里实现图片懒加载效果了,当然,官方给出的写法可能和我这个有点出入,但是木有关系啦。
还可以用css的写法,但是没试过,所以就不在这里讲了,要是说错了,丢人啊!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <style> img[lazy=loading] { /*your style here*/ } img[lazy=error] { /*your style here*/ } img[lazy=loaded] { /*your style here*/ } /* or background-image */ .yourclass[lazy=loading] { /*your style here*/ } .yourclass[lazy=error] { /*your style here*/ } .yourclass[lazy=loaded] { /*your style here*/ } </style> |
这个是官方的写法,有兴趣的可以试试。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用