Vue3图片懒加载(vue3-lazyload)

Vue2图片懒加载

参考文档:vue3-lazyload

效果如下图:vue3-lazyload@0.3.8

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在线预览

安装

npm install vue3-lazyload
# or
yarn add vue3-lazyload
# or
pnpm add vue3-lazyload

引入并注册

import { createApp } from 'vue'
import VueLazyLoad from 'vue3-lazyload'
import Default from 'images/default.jpg'
import Error from 'images/error.jpg'
import App from './App.vue'const app = createApp(App)
app.use(VueLazyLoad, {loading: Default, // 加载中占位图error: Error, // 加载失败占位图lifecycle: {loading: (el: Element) => {console.log('loading', el)},error: (el: Element) => {console.log('error', el)},loaded: (el: Element) => {console.log('loaded', el)}}
})
app.mount('#app')

使用

基本使用

<script lang="ts" setup>
import { ref } from 'vue'
const Image1 = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/5.jpg')
</script>
<template><div class="m-image"><img class="u-image" v-lazy="Image1" /></div>
</template>
<style lang="less" scoped>
.m-image {width: 200px;height: 200px;border: 1px solid #d9d9d9;border-radius: 8px;.u-image {width: 100%;height: 100%;border-radius: 8px;&[lazy=loading] {object-fit: cover;}&[lazy=loaded] {object-fit: contain;}}
}
</style>

自定义配置

<script setup lang="ts">
import { ref } from 'vue'
import { Space, Button } from 'vue-amazing-ui'
import 'vue-amazing-ui/css'
const Image1 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/5.jpg'
const Image2 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/8.jpg'
const Image3 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/9.jpg'
const lazyOptions = ref({src: Image1,// loading: Image2,// error: Image2,lifecycle: {loading: (el: Element) => {console.log('image loading', el)},error: (el: Element) => {console.log('image error', el)},loaded: (el: Element) => {console.log('image loaded', el)}}
})
function onClick () {lazyOptions.value.src = Image3
}
</script>
<template><Space align="center" :size="30"><div class="m-image"><img class="u-image" v-lazy="{...lazyOptions}" /></div><Button type="primary" @click="onClick">Change Image</Button></Space>
</template>
<style lang="less" scoped>
.m-image {width: 200px;height: 200px;border: 1px solid #d9d9d9;border-radius: 8px;.u-image {width: 100%;height: 100%;border-radius: 8px;&[lazy=loading] {object-fit: cover;}&[lazy=loaded] {object-fit: contain;}}
}
</style>

延迟加载

<script lang="ts" setup>
import { ref } from 'vue'
import { Space, Button } from 'vue-amazing-ui'
import 'vue-amazing-ui/css'
const Image1 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/5.jpg'
const Image2 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/8.jpg'
const Image3 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/9.jpg'
const lazyOptions = ref({src: Image1,// loading: Image2,// error: Image2,lifecycle: {loading: (el: Element) => {console.log('image loading', el)},error: (el: Element) => {console.log('image error', el)},loaded: (el: Element) => {console.log('image loaded', el)}}
})
function onClick () {lazyOptions.value.src = Image3
}
</script>
<template><Space align="center" :size="30"><div class="m-image"><img class="u-image" v-lazy="{...lazyOptions, delay: 1000}" /></div><Button type="primary" @click="onClick">Change Image</Button></Space>
</template>
<style lang="less" scoped>
.m-image {width: 200px;height: 200px;border: 1px solid #d9d9d9;border-radius: 8px;.u-image {width: 100%;height: 100%;border-radius: 8px;&[lazy=loading] {object-fit: cover;}&[lazy=loaded] {object-fit: contain;}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/884395.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hudi Upsert原理

1. 前言 如果要深入了解Apache Hudi技术的应用或是性能调优&#xff0c;那么明白源码中的原理对我们会有很大的帮助。Upsert是Apache Hudi的核心功能之一&#xff0c;主要完成增量数据在HDFS/对象存储上的修改&#xff0c;并可以支持事务。而在Hive中修改数据需要重新分区或重…

ctfshow web入门文件上传总结

1.web151 前端验证 前端验证&#xff0c;修改html代码&#xff0c;上传还有一句话木马的php文件,之后用蚁剑连接即可找到flag <?php eval($_POST[1])?>2.web152 后端验证&#xff0c;修改mime类型(content-type) burp抓包&#xff0c;修改content-type为image/png …

基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)

&#x1f388;系统亮点&#xff1a;协同过滤算法、节流算法、支付宝沙盒支付、图形化分析、实时聊天&#xff1b; 一.系统开发工具与环境搭建 1.系统设计开发工具 后端使用Java编程语言的Spring boot框架 项目架构&#xff1a;B/S架构 运行环境&#xff1a;win10/win11、jdk1…

手把手写Linux第一个小程序 - 进度条(5种版本)

本专栏内容为&#xff1a;Linux学习专栏&#xff0c;分为系统和网络两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握Linux。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;linux &#x1f69a;代码仓库&#xff1a;小小unicorn的代…

dhcp池没有空闲ip导致手机无法获得ip

得到用户反馈&#xff0c;一个高速项目部的wifi无法接入&#xff0c;让排查原因。 反馈有的手机能接入&#xff0c;有的接入不了。查看ac界面发现有个终端获得的ip是169.254.xxx.xxx。 ip地址是169.254.96.17显然是手机打开wlan开关后&#xff0c;鉴权通过后dhcp过程&#xff0…

《高频电子线路》—— 振荡器稳定性问题

文章内容来源于【中国大学MOOC 华中科技大学通信&#xff08;高频&#xff09;电子线路精品公开课】&#xff0c;此篇文章仅作为笔记分享。 振荡器稳定性问题 频率准确度 & 频率稳定度 希望频率稳定度越小越好。 频率稳定度分类 影响振荡频率稳定度的参数 振荡频率是和电…

HTMLCSS: 打造跳一跳加载器,点燃用户等待热情

效果演示 这段 HTML 代码创建了一个简单的网页&#xff0c;其中包含一个动画效果&#xff0c;用来模拟一个加载器loading HTML <div class"loader"></div>div创建了一个动画效果的加载器 CSS html, body {width: 100vw;height: 100vh;display: flex…

Nginx 的 Http 模块介绍(上)

Nginx 的 Http 模块介绍&#xff08;上&#xff09; 1. http 请求 11 个处理阶段介绍 Nginx 将一个 Http 请求分成多个阶段&#xff0c;以模块为单位进行处理。其将 Http请求的处理过程分成了 11 个阶段&#xff0c;各个阶段可以包含任意多个 Http 的模块并以流水线的方式处理…

网络:ARP的具体过程和ARP欺骗

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》《Linux》《网络》 《redis学习笔记》 文章目录 前言ARP具体过程ARP欺骗原理总结 前言 本文仅作为ARP具体过程和ARP欺骗的知识总结 硬件类型 &#xff1a;指定发送和接受ARP包的硬件类型&am…

[0260].第25节:锁的不同角度分类

MySQL学习大纲 我的数据库学习大纲 从不同维度对锁的分类&#xff1a; 1.对数据操作的类型划分:读锁和写锁 1.1.读锁 与 写锁概述&#xff1a; 1.对于数据库中并发事务的读-读情况并不会引起什么问题。对于写-写、读-写或写-读这些情况可能会引起一些问题&#xff0c;需要使用…

数据结构之链式结构二叉树的实现(初级版)

本文内容将主会多次用到函数递归知识&#xff01;&#xff01;&#xff01; 本节内容需要借助画图才能更好理解&#xff01;&#xff01;&#xff01; 和往常一样&#xff0c;还是创建三个文件 这是tree.h #pragma once #include<stdio.h> #include<stdlib.h> …

Data+AI━━人群圈选,你被圈中了吗?

DataAI━━人群圈选&#xff0c;你被圈中了吗&#xff1f; 前言我们是否正在失去选择的自主权&#xff1f;AI人群圈选流程AI人群圈选技术发展趋势 前言 智能时代的清晨&#xff0c;打开手机&#xff0c;各类APP精准推送的信息扑面而来。菜市场买过一次三文鱼&#xff0c;生鲜A…

手撕快排的三种方法:让面试官对你刮目相看

快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 目录 &#x1f4af;前言 &#x1f4af;快速排序基础概念 &#x1f4af;Hoare 版本 1.算法思路 2.代码示例 3.有关该代码的问题 3.1&#x1f62e;为什么…

51单片机教程(五)- LED灯闪烁

1 项目分析 让输入/输出口的P1.0或P1.0~P1.7连接的LED灯闪烁。 2 技术准备 1、C语言知识点 1 运算符 1 算术运算符 #include <stdio.h>int main(){// 算术运算符int a 13;int b 6;printf("%d\n", ab); printf("%d\n", a-b); printf("%…

ceph补充介绍

SDS-ceph ceph介绍 crushmap 1、crush算法通过计算数据存储位置来确定如何存储和检索&#xff0c;授权客户端直接连接osd 2、对象通过算法被切分成数据片&#xff0c;分布在不同的osd上 3、提供很多种的bucket&#xff0c;最小的节点是osd # 结构 osd (or device) host #主…

集成ruoyi-it管理系统,遇到代码Bug

前言&#xff1a;这次ruoyi框架开发it管理系统&#xff0c;出现很多问题&#xff0c;也有学到很多东西&#xff0c;出现几个问题&#xff0c;希望下次项目不会出现或者少出现问题&#xff1b;其中还是有很多基础知识有些忘记&#xff0c;得多多复习 1&#xff1a;当写的代码没…

大模型面试-Layer normalization篇

1. Layer Norm 的计算公式写一下? 2. RMS Norm 的计算公式写一下? 3. RMS Norm 相比于 Layer Norm 有什么特点? 4. Deep Norm 思路? 5. 写一下 Deep Norm 代码实现? 6.Deep Norm 有什么优点? 7.LN 在 LLMs 中的不同位置 有什么区别么?如果有,能介绍一下区别么? 8. LLM…

【Linux第七课--基础IO】内存级文件、重定向、缓冲区、文件系统、动态库静态库

目录 引入内存级文件重新使用C文件接口 -- 对比重定向写文件读文件文件流 认识文件操作的系统接口open参数 -- flagflag的内容宏的传参方式 open关闭文件写文件读文件结论 引入文件描述符fd、对文件的理解理解一切皆文件方法集文件fd的分配规则 重定向代码的重定向输入重定向输…

手写实现call,apply,和bind方法

手写实现call&#xff0c;apply和bind方法 call&#xff0c;apply和bind方法均是改变this指向的硬绑定方法&#xff0c;要想手写实现此三方法&#xff0c;都要用到一个知识点&#xff0c;即对象调用函数时&#xff0c;this会指向这个对象&#xff08;谁调用this就指向谁&#…

Redis全系列学习基础篇之位图(bitmap)常用命令的解析

文章目录 描述常用命令及解析常用命令解析 应用场景统计不确定时间周期内用户登录情况思路分析实现 统计某一特定时间内活跃用户(登录一次即算活跃)的数量思路分析与实现 描述 bitmap是redis封装的用于针对位(bit)的操作,其特点是计算效率高&#xff0c;占用空间少,常被用来统计…