18、vue-lazyload实现图片懒加载
时间:2022-06-09
本文章向大家介绍18、vue-lazyload实现图片懒加载,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言:GitHub:https://github.com/Ewall1106/mall(请选择分支18)
1、安装
vue-lazyload官网:https://github.com/hilongjw/vue-lazyload
$ cnpm install vue-lazyload --save
install
2、main.js中引入
(1)引入并注册vue-lazyload
main.js
(2)配置参数
① 参数有很多,具体大家可以去官网上查看并自主设置,我这里就只实现基本的功能配置一个loading
参数,实现在图片在加载的时候有一个loading的效果
② 丢个我制作gif的网站:http://www.ajaxload.info/
③ 注意路径
参数配置
3、页面中的使用
(1)html属性替换
<img :src="item.imgurl" alt="">
替换成:
<img v-lazy="item.imgurl" alt="">
(2)对loading时候的gif图做下简单样式处理:
css
4、页面呈现效果
(当你网速比较慢的时候的)
image.png
参考学习 https://github.com/hilongjw/vue-lazyload
- SQL Server 性能优化之——重复索引
- SQL Server 性能优化之——系统化方法提高性能
- C# 调用PowerShell方法
- 使用Visual Studio 2010 一步一步创建Powershell Module 和 Cmdlet
- [SQLServer大对象]——FileTable初体验
- JavaScript闭包,只学这篇就会了
- [数据库基础]——编码标准之格式
- [数据库基础]——编码标准之结构
- 2017前端开发手册三-前端职位描述
- [.NET自我学习]Delegate 泛型
- [数据库基础]——图解JOIN
- ubuntu搭建内网穿透服务Ngrok
- SQL Server 性能优化之——T-SQL 临时表、表变量、UNION
- node.js 学习笔记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- gganimate|创建可视化动图,让你的表会说话
- ggplot2|玩转Manhattan图-你有被要求这么画吗?
- deconstructSigs|探寻cosmic的独特“气质”-mutation signature !
- barplot3d|圣诞节送你一个mutation signature搭建的“乐高”
- R读取gmt文件
- 一个画双层pie图的函数
- DEapp(差异表达分析)本地版——自由飞翔
- 盘一盘Tidyverse| 筛行选列之select,玩转列操作
- 2-14 |“特殊”的日子,多学一种表达爱的方式
- 盘一盘Tidyverse| 只要你要只要我有-filter 筛选行
- RNA相互作用神器——ENCORI
- R|tableone 快速绘制文章“表一”-基线特征三线表
- R-apply| 基因表达量批量二分类,Get!(修正版)
- TCGAbiolinks获取癌症临床信息
- R-rbind.fill|列数不一致的多个数据集“智能”合并,Get!