vue3前端开发-小兔鲜项目-图片懒加载的自定义标签

vue3前端开发-小兔鲜项目-图片懒加载的自定义标签!很多大型网站,因为首页面渲染的内容太多了,然而有些用户,可能在顶部就发现了自己感兴趣的内容,直接就点击跳转去了其他页面,因此,完全没有必要完全加载所有的页面内容,使用懒加载,可以俭省节约一些服务器的资源调用。降低服务器的压力。这种业务场景,在大型网站的客户体验度优化中是非常常见和必须的。


下面直接看代码的操作流程和内容。


第一步,我们新建一个index.js。存档放在目录

如图,在directives目录下面新建一个index.js

在这里面我们自定义一个懒加载的插件。然后在主配置文件main.js中调用注册一下就行了。


//定义懒加载插件
import { useIntersectionObserver } from "@vueuse/core";
export const lazyPlugin = {install(app){//懒加载指令逻辑app.directive('img-lazy',{mounted(el,binding){//el:指令绑定的那个元素 img//binding: binding.value 指令等于号后面绑定的console.log(el,binding.value)useIntersectionObserver(el,([{isIntersecting}]) =>{console.log(isIntersecting)if(isIntersecting){//进入视口区域el.src = binding.value}},)}})}
}

解释一下,意思就是,这个指令将来会绑定到img标签里面,作为一个动态渲染图片内容的作用。

当浏览器的页面视图进入浏览区域内,就会加载绑定我们的接口调用绑定过来的资源信息,给img标签做图片渲染操作。

就是这个意思。


 

在main.js中做一个调用,和注册即可,非常简单。

下面是测试的效果情况。


如图,我们为了便于观察页面请求的资源,打开浏览器自带的开发者模块。

打开图片监控按钮。

此时,页面缓慢的向下拖动滚动条,当人气推荐栏目露头的时候,就会马上渲染加载图片。


 

 

 如图,加载了这四张图片。

 

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

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

相关文章

神经网络之多层感知机

目录 一、全连接层:二、单层感知机概念:三、多层感知机概念: 一、全连接层: 在神经网络中,全连接层就是每个神经元都与上一层的所有神经元相连接,即每个神经元都接收上一层所有神经元的输入,并…

【面试题】数据结构:堆排序的排序思想?

堆排序的排序思想? 堆排序是一种高效的排序算法,其基本思想是利用堆这种数据结构来实现排序。堆是一种特殊的完全二叉树,通常用数组来表示。堆排序的基本步骤如下: 1. 构建初始堆: 将待排序的数组转换成一个最大堆&a…

【JavaEE】volatile + final + wait-notify + join + park-unpark 相关原理

本文基于jdk8 本文所讲的一些原理都是在多线程中经常使用的内容。 参考:黑马程序员深入学习Java并发编程,JUC并发编程全套教程_哔哩哔哩_bilibili 目录 volatile原理 Java内存模型(JMM) 可见性&有序性 双重检查锁应用 final原理 设置final变量…

GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建

原文链接:GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247608565&idx3&snd4e9d447efd82e8dd8192f7573886dab&chksmfa826912cdf5e00414e01626b52bab83a96199a6bf69cbbef7f7fe…

学习日志:java线程

文章目录 前言一、线程和进程线程与进程的关系 二、Java 线程和操作系统的线程JDK 1.2 之前JDK 1.2 及以后用户线程和内核线程 三、创建线程四、线程的生命周期和状态五、线程的上下文切换六、Thread#sleep() 方法和Object#wait() 方法 前言 这里总结线程的一些概念。 一、线程…

​探讨元宇宙和VR虚拟现实之间的区别​

在数字时代,人们对虚拟现实的兴趣与日俱增。在虚拟现实技术的推动下,出现了两个概念:元宇宙和VR虚拟现实。虽然这两个概念都与虚拟现实有关,但它们有着不同的特点和用途。在本文中,我们将探讨元宇宙和VR虚拟现实之间的…

香橙派AIpro-携手华为-为AI赋能

文章目录 香橙派AIpro-携手华为-为AI赋能开箱和功能介绍开箱功能介绍 环境搭建镜像烧录进入系统 测试项目YOLOv5部署YOLOv5识别单张图片实时识别视频使用Ascend测试yolov5 产品评价 香橙派AIpro-携手华为-为AI赋能 今天新入手了一款香橙派AIPro,让我们一起跟着文章…

接口防刷!利用redisson快速实现自定义限流注解

问题: 在日常开发中,一些重要的对外接口,需要加上访问频率限制,以免造成资��损失。 如登录接口,当用户使用手机号验证码登录时,一般我们会生成6位数的随机验证码,并将验…

【SpringBoot】Controller与Test

第一个SpringBoot程序: RestController public class HelloController{ RequestMapping("/hello") public String hello(){ return "Hello Spring Boot!!!"; } } 单元测试: SpringBootTest public class HelloTest{ Test public void hello(){ Syste…

【iOS】——编译链接和动态链接器

前言 计算机语言分为机器语言:汇编语言,高级语言。 可以将高级语言分为两种:1,编译语言和解释型语言(直译式语言)。 编译型语言(一次性翻译) 编译型语言的程序只要经过编译器编译之…

服务的弹性守护者:在Eureka中实现服务降级策略

标题:服务的弹性守护者:在Eureka中实现服务降级策略 在微服务架构中,服务的稳定性和可靠性至关重要。Eureka作为Netflix开源的服务发现框架,不仅提供了服务注册与发现功能,还支持实现服务的降级策略。服务降级是一种在…

uniapp自定义tabBar

uniapp自定义tabBar 1、在登录页中获取该用户所有的权限 getAppFrontMenu().then(res>{if(res.length > 0){// 把所有权限存入缓存中let firstPath res.reverse()[0].path;uni.setStorageSync(qx_data, res);uni.switchTab({url: firstPath,})// 方法二 通过uni.setTabB…

Netty SSL/TLS

Netty中的SSL/TLS详细原理主要涉及到SSL/TLS协议在Netty框架中的实现方式和加密通信过程。SSL/TLS(安全套接层/传输层安全协议)是一种安全协议,用于在两个通信应用程序之间提供私密性和数据完整性。以下是Netty中SSL/TLS的详细原理&#xff1…

Android 大屏外接显示器锁屏无触摸

一、大海捞针 1、首先查看log,发现异常log log表示主显示器即id 0的显示器有可交互窗口但是没有焦点,副显示器即id 4有焦点但是没有可交互窗口。猜想副显示器把主显示器的焦点抢走了,只需把焦点从副显示器挪回主显示器即可。 通过查看源代码知道上面这段log来自于InputDi…

【时时三省】单元测试 简介

目录 1,单元测试简介 2,单元测试的目的 3,单元测试检查范围 4,单元测试用例设计方法 5,单元测试判断通过标准 6,测试范围 7,测试频率 8,输出成果 经验建议: 山不在高,有仙则名。水不在深,有龙则灵。 ----CSDN 时时三省 1,单元测试简介 单元测试在以V模型…

filebeat,kafka,clickhouse,ClickVisual搭建轻量级日志平台

springboot集成链路追踪 springboot版本 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.6.3</version><relativePath/> <!-- lookup parent from…

【CSS in Depth 2 精译_019】3.2 CSS 的盒模型

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…

【Qt安装与简易串口控制Arduino开发板小灯教程】

【Qt安装与简易串口控制Arduino开发板小灯教程】 1. 前言2. QT环境搭建3. 验证QT_Creator是否安装成功3.1 设计流程3. 2 上位机界面设计 4. 上位机逻辑代码编写4.1 添加串口库、包含串口相关头文件4.2 添加QSerialPort成员4.3 创建串口对象、搜索所有可用串口4.4 在编写“打开串…

如何基于 Apache SeaTunnel 同步数据到 Iceberg

概述 Apache SeaTunnel Apache SeaTunnel 是一个分布式、高性能、易扩展、用于海量数据&#xff08;离线&实时&#xff09;同步和转化的开源数据集成平台&#xff0c; 支持spark、flink 及自研 Zeta 引擎&#xff0c;有庞大的用户社群. Apache Iceberg Apache Iceberg …

MySQL 架构中的三层服务是什么?

MySQL的架构可以分为客户端层、服务器层、存储引擎层三次服务&#xff0c;这些服务协同工作以提供高效的数据库管理服务。 1. 客户端层&#xff08;Client Layer&#xff09; 功能&#xff1a;客户端层是与用户交互的部分&#xff0c;用户通过客户端向MySQL服务器发送请求、接…