首页 > 其他分享 >vue学习之----- 图片懒加载插件【vue-lazyload】

vue学习之----- 图片懒加载插件【vue-lazyload】

时间:2023-01-26 00:34:26浏览次数:39  
标签:npm 插件 vue ----- lazyload 加载 图片

1、用npm安装

npm i vue-lazyload

2、main.js中绑定到vue对象上

 

3、在需要懒加载的img标签上把src换成v-lazy

 

4、懒加载的意义:

(1)显示在屏幕之外的图片不加载,图片进入显示范围,再进行加载~

(2)页面加载速度变快,节省流量,提升用户体验


 

标签:npm,插件,vue,-----,lazyload,加载,图片
From: https://www.cnblogs.com/zhaoyingzhen/p/17067487.html

相关文章

  • An-Introduction-to-English-Morphology
    什么是word?一种是因为其含义无法预测而必须被写进词典的word,另一种是组成phrase和sentence的基本元素之外的其他基本元素。真实情况远比这种分类复杂meaningunitsor......
  • POJ--2431 Expedition(优先队列)
    记录0:172023-1-26http://poj.org/problem?id=2431reference:《挑战程序设计竞赛(第2版)》2.2.4p77DescriptionAgroupofcowsgrabbedatruckandventuredona......
  • 浙大“python->机器语言“的学习一(做计算)
    T1输入格式本题无输入输出格式输出由3行星号*组成的方形,如样例所示。每行除了最后一个星号,每个星号后面有空格*********是这样的,发现我一行一行输出根......
  • Openstack-创建实例错误
    创建实例错误实例执行所请求操作失败,实例处于错误状态。:请稍后再试[错误:Buildofinstancebeaeb5e0-26eb-4044-ae14-bb87d509886daborted:Failedtoallocateth......
  • Openstack-删除卷:您被禁止执行 删除卷 (僵尸卷)
    您被禁止执行删除卷(僵尸卷)您被禁止执行删除卷:7f23a26a-27f2-4504-9191-0f5630a5bff5,卷一直在创建,但实例已经被删除了[root@controller~]#mysql-uroot-p000......
  • Day - 03 JQuery及AJAX
    1.jquery介绍jQuery的定义jQuery是对JavaScript的封装,它是免费、开源的JavaScript函数库,jQuery极大地简化了JavaScript编程。jQuery的作用jQuery和JavaScript......
  • 2023-01-25 大年初四手机卡挂失
    2023-01-25周三大年初四,昨天手机被偷走虽然是找回来了手机卡也还回来了。刚好没有牙签卡针这些,我就先夹在手机壳后面了,昨天晚上回来后就发现手机壳里的两张手机卡找不到......
  • Openstack-dashboard默认配额
    创建实例不超过10个方法一修改配置文件在使用openstack的过程中,默认创建的实例最多10个,这是因为配额默认实例就是10所以我们需要修改配置文件/etc/nova/nova.conf中......
  • vue2升级vue3:vue3真的需要vuex或者Pinia吗?hooks全有了
    在写 《vue2升级vue3:TypeScript下vuex-module-decorators/vuex-classtovuex4.x》,建议新项目使用 Pinia,但是我的项目部分组件希望直接打包出去给地方使用。这个时候还是......
  • 2021-2022年部分个人作品一览
    2021-2022年部分模型截图              ---------------------------------------------------------------------------------------......