随着互联网的快速发展，网页中包含的图片越来越多，如果一次性加载全部图片，将会导致页面加载缓慢，影响用户体验。此时，图片懒加载技术就应运而生。在 Vue.js 中，我们可以使用 vue-lazyload 实现图片懒加载。
vue-lazyload 简介
vue-lazyload 是一款轻量级的图片懒加载插件，为用户提供无缝图片懒加载体验。它支持 Vue.js 1.x 和 2.x 版本，还支持 SSR（Server Side Rendering）。
vue-lazyload 的使用方法
安装 vue-lazyload
npm install vue-lazyload --save
在项目中引入 vue-lazyload
import Vue from 'vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload)
在 img 标签中使用 vue-lazyload
<img v-lazy="imageSrc" />
这里的
imageSrc是你需要懒加载的图片的路径，此外你还可以设置占位图、错误图和加载中图等。
vue-lazyload 的高级用法
设置默认值
在项目中使用 vue-lazyload 时，你可以为所有图片设置默认值：
Vue.use(VueLazyload, { loading: '../assets/loading.gif', error: '../assets/error.png', attempt: 1 })
其中，loading 指定图片加载中的占位图路径，error 指定图片加载失败的占位图路径，attempt 指定图片加载时的最大尝试次数。
动态绑定图片地址
在项目中，有时需要根据一些条件来动态绑定图片地址，我们可以通过设置 vue-lazyload 的 directive 来实现：
-- -------------------- ---- ------- -------------------- - ---------- - -- -------- --------- -- -- - ----- -------- - --------------------------- ----- ----- - --- ------- --------- - -------- ------------ - -- -- - ------ - --------- - - - --展开代码
此时，我们可以在 img 标签中添加 data-img 这个属性，来动态绑定图片地址：
<img v-lazy data-img="http://example.com/image.jpg" />
示例代码
-- -------------------- ---- ------- ---------- ----- ---- ------------ ------ -- ----------- ------------ ------------ -- ------ ----------- -------- ------ ----------- ---- -------------- ------ ------- - ------ - ------ - ------- - ----------------------------------------- ----------------------------------------- ----------------------------------------- ----------------------------------------- ----------------------------------------- ----------------------------------------- ----------------------------------------- ---------------------------------------- -- ----------- -- - -- ----------- - --------- - ------------ -------- - --- ----- - ---- ----- ------------ - -- -- - ------------------- ----- - ------------- -- - ----- --------- - ---------------------------------- ----- --------- - ------------ -- ---------- - ------------------ -- ---------- - --------------- - -- --- - --------------------------------- ------------- ----- - - -- --------- - -- --- -------------------- - -------- ------------------------------------------------------ ------ --------------------------------------------------- -- -- -------- --------------- - -------------------- -- -- -------- - ---------- - ----- ----- - ---------------------- ----- --- - ----- - - -- ---- - ------------------- - --------------- - ----------- ------ - --------------- - -------------------- ---- - - - --------- ------ ------- --- - ------ ------ ------- ------ -------------- ----- - --------展开代码
上述代码实现了一个简单的图片懒加载的示例，通过绑定 loadMore 指令，当滚动到图片所在位置时，自动加载下一页图片。这里还设置了图片加载中和加载失败的默认占位图。您可以根据自己的需求适当更改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bfe2540c976d473a4d788e
