【性能优化】在大批量数据下使用 HTML+CSS实现走马灯,防止页面卡顿

切换效果

页面结构变化

1.需求背景

项目首页存有一个小的轮播模块,保密原因大概只能这么展示,左侧图片右侧文字,后端一次性返回几百条数据(开发环境下,生产环境只会更多).无法使用分页解决,前端需要懒加载防止页面卡顿
在这里插入图片描述
写个小demo演示,如下
在这里插入图片描述

2.解决思路

获取到数据后,取第一条数据展示.切换时,这里以查看下一张为例演示.切换下一张时,动态创建一个dom元素,通过字符串的方式设置innerHtml,将下一张的dom元素插入父节点.

同时父元素的第一个子元素(初始展示第一条数据的dom元素)和新创建的展示下一条数据的dom元素同时向左偏移自身宽度,然后把切走的dom元素清除,实现切换效果,同时避免页面大量结构堆积

3.代码如下

仅做了’下一张’功能,其他请自行补充

<template><div class="container"><button @click="golast">上一张</button><button @click="gonext">下一张</button><div class="windows"><div class="scrollBox"><div class="scrollItem"><div class="img"><el-image :src="initialData.imgUrl"></el-image></div><div class="messBox">{{ initialData.mess }}</div></div></div></div></div>
</template>
<script>
export default {data () {return {localData: [{ imgUrl: '../assets/xxx.png', mess: '11111' },{ imgUrl: '../assets/xxx.png', mess: '22222' },{ imgUrl: '../assets/xxx.png', mess: '33333' },{ imgUrl: '../assets/xxx.png', mess: '44444' },{ imgUrl: '../assets/xxx.png', mess: '55555' },{ imgUrl: '../assets/xxx.png', mess: '66666' },],initialData: '', // 初始展示数据nowIndex: 0// 当前展示数据的索引}},created () {},mounted () {this.initData()},computed: {},methods: {initData () {// 初始副职this.initialData = this.localData[this.nowIndex]},// 点击查看上一张golast () {},// 点击查看下一张gonext () {if (this.localData.length <= this.nowIndex + 1) returnthis.readyBox('next')const fatherDom = document.querySelector('.windows')const moveDistanceX = fatherDom.offsetWidthconst domArr = fatherDom.querySelectorAll('.scrollBox')// 这里判断.初始结构和动态创建的元素的初始位置不同,导致偏移时的数值是不同的if (!domArr[0].classList.contains('newScrollBox')) {domArr[0].style.transform = `translate(-${moveDistanceX}px,0px)`} else {domArr[0].style.transform = `translate(-${moveDistanceX * 2}px,0px)`}domArr[1].style.transform = `translateX(-${moveDistanceX}px)`this.nowIndex++// 移除上一个dom元素const timeId1 = setTimeout(() => {fatherDom.removeChild(domArr[0])clearTimeout(timeId1)}, 501)},// 为下一次切换准备dom元素readyBox (type) {// 信息展示列表无数据或只有一条数据时,不执行if (this.localData.length <= 1) returnlet nextShowData = ''// 上一张或下一张要展示的数据const fatherDom = document.querySelector('.windows')// 获取父元素const newDom = document.createElement('div')// 创建新元素// 设置新元素的样式newDom.className = 'scrollBox'newDom.classList.add('newScrollBox')newDom.style.width = '100%'newDom.style.height = '100%'newDom.style.position = 'absolute'newDom.style.transition = 'all 0.5s'// 上一张if (type === 'last') {// 判断当前展示列表是否合法if (this.nowIndex - 1 < 0) returnnextShowData = this.localData[this.nowIndex - 1]//此处省略........,自行补充}//   下一张if (type === 'next') {// 判断当前展示列表是否合法if (this.localData.length <= this.nowIndex + 1) returnnextShowData = this.localData[this.nowIndex + 1]// 下一张的数据newDom.style.left = '100%'}// 新元素的内部结构const innerHtml = `<div class="scrollItem" style=" display: flex;  width: 100%; height: 100%; background-color: pink;"><div class="img" style="width:50%; height:100%" ><el-image src="${nextShowData.imgUrl}"></el-image></div><div class="messBox" style=" font-size: 16px; width:50%; height:100%; background-color: skyblue; ">${nextShowData.mess}</div></div>`// 插入子元素newDom.innerHTML = innerHtmlfatherDom.appendChild(newDom)}}
}
</script>
<style lang='scss' scoped>
.container {width: 100%;height: 100%;
}.container .windows {position: relative;left: 30%;font-size: 0px;overflow: hidden;width: 40%;height: 40%;border: 1px solid red;
}.scrollBox {position: absolute;width: 100%;height: 100%;transition: all 0.5s;
}.windows .scrollItem {display: flex;width: 100%;height: 100%;background-color: pink;
}.windows .scrollItem .img {width: 50%;height: 100%;
}.windows .messBox {font-size: 16px;width: 50%;height: 100%;background-color: skyblue;
}
</style>

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

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

相关文章

【electron6】浏览器实时播放PCM数据

pcm介绍&#xff1a;PCM&#xff08;Puls Code Modulation&#xff09;全称脉码调制录音&#xff0c;PCM录音就是将声音的模拟信号表示成0,1标识的数字信号&#xff0c;未经任何编码和压缩处理&#xff0c;所以可以认为PCM是未经压缩的音频原始格式。PCM格式文件中不包含头部信…

【Langchain大语言模型开发教程】模型、提示和解析

&#x1f517; LangChain for LLM Application Development - DeepLearning.AI 学习目标 1、使用Langchain实例化一个LLM的接口 2、 使用Langchain的模板功能&#xff0c;将需要改动的部分抽象成变量&#xff0c;在具体的情况下替换成需要的内容&#xff0c;来达到模板复用效…

AIoTedge 智能边缘物联网平台

AIoTedge智能边缘物联网平台是一个创新的边云协同架构&#xff0c;它为智能设备和系统提供了强大的数据处理和智能决策能力。这个平台的核心优势在于其边云协同架构设计&#xff0c;它优化了数据处理速度&#xff0c;提高了系统的可靠性和灵活性&#xff0c;适用于多种场景&…

NVIDIA 完全过渡到开源 GPU 内核模块

目录 支持的 GPU安装程序更改将包管理器与 CUDA 元包配合使用使用 runfile使用安装帮助程序脚本包管理器详细信息apt&#xff1a;基于 Ubuntu 和 Debian 的发行版dnf&#xff1a;Red Hat Enterprise Linux、Fedora、Kylin、Amazon Linux 或 Rocky Linuxzypper&#xff1a;SUSE …

项目实战--C#实现图书馆信息管理系统

本项目是要开发一个图书馆管理系统&#xff0c;通过这个系统处理常见的图书馆业务。这个系统主要功能是&#xff1a;&#xff08;1&#xff09;有客户端&#xff08;借阅者使用&#xff09;和管理端&#xff08;图书馆管理员和系统管理员使用&#xff09;。&#xff08;2&#…

pdf太大了怎么变小 pdf太大了如何变小一点

在数字化时代&#xff0c;pdf文件已成为工作与学习的重要工具。然而&#xff0c;有时我们可能会遇到pdf文件过大的问题&#xff0c;这会导致传输困难或者存储不便。别担心&#xff0c;下面我将为你介绍一些实用的技巧和工具&#xff0c;帮助你轻松减小pdf文件的大小。 方法一、…

通过libx246 libfaac转换推送RTMP音视频直播流

一、RTMP简介及rtmplib库&#xff1a; RTMP协议是Real Time Message Protocol(实时信息传输协议)的缩写&#xff0c;它是由Adobe公司提出的一种应用层的协议&#xff0c;用来解决多媒体数据传输流的多路复用&#xff08;Multiplexing&#xff09;和分包&#xff08;packetizing…

Mysql----内置函数

前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、日期函数 日期&#xff1a;年月日 时间&#xff1a;时分秒 查询&#xff1a;当前时间&#xff0c;只显示当前日期 注意&#xff1a;如果类型为date或者datetime。表中数据类型为date,你插入时…

昇思MindSpore 应用学习-FCN图像语义分割-CSDN

日期 心得 昇思MindSpore 应用学习-FCN图像语义分割 (AI 代码解析) 全卷积网络&#xff08;Fully Convolutional Networks&#xff0c;FCN&#xff09;是UC Berkeley的Jonathan Long等人于2015年在Fully Convolutional Networks for Semantic Segmentation[1]一文中提出的用…

MATLAB R2023b下载安装教程汉化中文版设置

MATLAB R2023b下载安装教程汉化中文版设置 Matlab 是一款功能强大的商业数学软件 Matlab&#xff08;Matrix Labortory&#xff09;即矩阵实验室&#xff0c;它在数值计算、数据分析、算法开发、建模与仿真等众多领域都发挥着重要作用。 Matlab 具有以下显著特点和优势&…

移动端如何离线使用GPT

在移动端离线使用GPT&#xff0c;只需要一个app&#xff1a;H2O AI Personal GPT 是H2OAI上架的一款app&#xff0c;可离线使用&#xff0c;注重数据隐私&#xff0c;所有数据都只存储在本地。对H2OAI感兴趣的伙伴&#xff0c;可移步&#xff1a;https://h2o.ai 该app支持的模…

大语言模型-文本向量模型评估基准 MTEB

MTEB&#xff08;Massive Text Embedding Benchmark&#xff09; 涵盖112种语言的58个数据集&#xff0c;包含如下8种任务。 1、双语文本挖掘&#xff08;Bitext Mining&#xff09; 任务目标&#xff1a; 在双语语料库中识别语义等价的句子对。 任务描述&#xff1a; 输入…

服务器借助笔记本热点WIFI上网

一、同一局域网环境 1、当前环境&#xff0c;已有交换机组网环境&#xff0c;服务器已配置IP信息。 设备ip服务器125.10.100.12交换机125.10.100.0/24笔记本125.10.100.39 2、拓扑图 #mermaid-svg-D4moqMym9i0eeRBm {font-family:"trebuchet ms",verdana,arial,sa…

价格战再起:OpenAI 发布更便宜、更智能的 GPT-4o Mini 模型|TodayAI

OpenAI 今日推出了一款名为 GPT-4o Mini 的新模型&#xff0c;这款模型较轻便且成本更低&#xff0c;旨在为开发者提供一个经济实惠的选择。与完整版模型相比&#xff0c;GPT-4o mini 在成本效益方面表现卓越&#xff0c;价格仅为每百万输入 tokens 15 美分和每百万输出 tokens…

【接口自动化_12课_基于Flask搭建MockServer】

DAY12_基于Flask搭建MockServer 目标&#xff1a;通过本节课主要核心内容要理解什么是MockServer&#xff0c;并且结合Flask进行实战。 章节大纲 1. 什么是Mock及应用场景理解 2. 框架对比及Flask基本应用理解 3. Mock Server接口设计实战重要 4. Mock Server如何运行理解…

守护动物乐园:视频AI智能监管方案助力动物园安全与秩序管理

一、背景分析 近日&#xff0c;某大熊猫参观基地通报了4位游客在参观时&#xff0c;向大熊猫室外活动场内吐口水的不文明行为。这几位游客的行为违反了入园参观规定并可能对大熊猫造成严重危害&#xff0c;已经被该熊猫基地终身禁止再次进入参观。而在此前&#xff0c;另一熊猫…

IMU提升相机清晰度

近期&#xff0c;一项来自北京理工大学和北京师范大学的团队公布了一项创新性的研究成果&#xff0c;他们将惯性测量单元&#xff08;IMU&#xff09;和图像处理算法相结合&#xff0c;显著提升了非均匀相机抖动下图像去模糊的准确性。 研究团队利用IMU捕捉相机的运动数据&…

苹果电脑crossover怎么下载 苹果电脑下载crossover对电脑有影响吗 MacBook下载crossover软件

CodeWeavers 发布了 CrossOver 24 版本更新&#xff0c;不仅兼容更多应用和游戏&#xff0c;得益于 Wine 9.0 带来的 7000 多项改进&#xff0c;CrossOver 还可以在 64 位系统上运行Windows应用的软件&#xff0c;使得用户可以在Mac系统中轻松安装使用仅支持Windows系统运营环境…

GPU租赁教程/云主机使用教程/在线GPU环境部署/免费GPU/免费算力||运用云服务器,跑自己的深度学习模型(保姆级教程)

一、环境准备 pycharm professional&#xff08;需要pycharm专业版&#xff0c;社区版不行&#xff09;潞晨云(潞晨科技)访问链接&#xff0c;目前应该是最便宜的GPU租赁平台了&#xff0c;不知道之后会不会涨价&#xff0c;点我链接注册送10元代金券&#xff0c;能跑6个小时的…

spark 动态资源分配dynamicAllocation

动态资源分配&#xff0c;主要是spark在运行中可以相对合理的分配资源。 初始申请的资源远超实际需要&#xff0c;减少executor初始申请的资源比实际需要少很多&#xff0c;增多executorSpark运行多个job&#xff0c;这些job所需资源有的多有的少&#xff0c;动态调整executor…