vue图片懒加载插件 vue-lazyload

柔光的暖阳◎ 2022-04-16 06:06 871阅读 0赞

第一步:安装插件

  1. npm i vue-lazyload --save

第二步:在main.js中引入,并使用

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70

参数参考网址:https://www.npmjs.com/package/vue-lazyload

第二步:使用插件

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1

第三步:在需要使用懒加载图片的页面使用v-lazy指令,

在图片加载之前先使用loading里面的图片,当图片加载之后使用加载后的图片;

它会时时检测图片滚动的位置,当页面没有滚动到图片的位置时,它是不会加载的;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2

图片懒加载的颜色也是可以调整的,点击开sgv图片,去设置fill属性,部分懒加载sgv图片下载

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 3

发表评论

表情:
评论列表 (有 0 条评论,871人围观)

还没有评论,来说两句吧...

相关阅读

    相关 vue实现图片

    vue实现图片懒加载 图片懒加载就是当数据没有加载出来的时候先留出一个图片的位置,等待数据的加载完之后渲染出来,大概就是占位等待图片加载完毕渲染 1.需要安装插件 vue-

    相关 vue图片

    vue做的项目,图片较多,都是直接引入的,每次打开主页加载比较慢。 ![Center][] 请求总共10.7M,只是图片就占了差不多9M,完成时间花了37秒,估计老板

    相关 vue图片

    介绍: vue-lazyload主要应用于图片延迟加载。包含如下的特点: 小巧轻便,功能强大,易于使用 可以用于加载任何图像类型 支持Vue 1.0和Vue 2.0