首页 > 编程语言 >小程序富文本内容渲染缓慢处理方案

小程序富文本内容渲染缓慢处理方案

时间:2024-04-23 10:35:09浏览次数:25  
标签:长图 渲染 大图 内容 缓慢 文本 加载

在做电商小程序的时候我们经常会遇到商品详情页面,商品描述富文本内容为一些大图、长图,加载起来异常缓慢的问题。

刚开始我们也是用的npm安装组件包:

npm install mp-html

在需要使用页面的 wxml 文件中添加

<mp-html content="{{html}}" />

 

这种方式可以正常加载出富文本内容,但遇到长图大图时加载就会特别慢,而且这种方式会等到所有内容全部加载完成之后才显示。

 

通过查看uniapp文档发现,其内置组件提供了 rich-text 能够友好的支持富文本内容的渲染,渲染速度有了质的提升,不管是长图还是大图,都是通过懒加载的方式逐步渲染,代码如下:

<rich-text :nodes="goods.detailInformation"></rich-text>

 

标签:长图,渲染,大图,内容,缓慢,文本,加载
From: https://www.cnblogs.com/minjh/p/18152291

相关文章

  • 边缘渲染是什么意思?属于云渲染吗?
    边缘渲染,即利用靠近数据源或用户的边缘计算资源进行渲染,以减少数据传输延迟并提升处理速度。这种方式虽然基于云技术,但更注重数据处理的地理位置优化,与传统的云渲染有所不同。 一、边缘渲染属于什么意思?边缘渲染是一种基于边缘计算节点构建的分布式并行集群计算平台。它通过......
  • 解码返回Unicode编码的文本
    publicstaticvoidMain(string[]args){stringunicodeText="\\u6b22\\u8fce\\u56de\\u6765";stringdecodedText=Regex.Unescape(unicodeText);Console.WriteLine(decodedText);}Unicode是一个字符集,它为世界上几乎所有的......
  • 为何3D动画工作室偏爱使用在线渲染农场?
    随着市场需求的不断增长和生产挑战的加剧,3D动画工作室面临着前所未有的压力。为了有效应对这些挑战,众多工作室选择了使用网络渲染农场。这种选择使他们能够借助网络渲染农场的强大渲染能力和高度灵活的资源配置,以此优化他们的工作流程,削减成本并缩短制作时间。 一、网络渲染农......
  • 前端页面渲染(文档+数据)不同模式
    一张可被用户访问的页面,可以被拆分为主文档(html)和数据两个部分,这两个部分既可以是组合在一起的(SSR),也可以是分离的(SPA、异步渲染)。比如一些活动搭建平台,可以增加一个数据网关,实现SSR,提升用户体验。服务端渲染(Server-SideRendering,SSR)服务端渲染是一种在服务器上生成完整......
  • 探索Kimi智能助手:如何用超长文本解锁高效信息处理新境界
    目前,Kimi备受瞩目,不仅在社交平台上引起了广泛关注,而且在解决我们的实际问题方面也显示出了巨大潜力。其支持超长文本的特性使得我们能够更加灵活地配置信息,避免了频繁与向量数据库进行交互以及编写提示词来回答查询的繁琐过程。简而言之,Kimi的出现为我们提供了一种更为便捷和高效......
  • css3多行文本多行文本缩略点击更多展开显示全部
    比如我要实现如下效果:数据集名称展示一行,超出自动省略,末尾增加编辑icon。点击编辑的icon,换成input输入框数据集描述最多展示三行,超出自动省略。末尾增加编辑icon。点击编辑的icon,换成textarea输入框展示一行省略+icon实现单行省略实现,无非是这样<div class="flex-row al......
  • 数字孪生云渲染整体架构设计
    大家好,本文在我开发的多个项目的基础上,提出了应用于数字孪生的云渲染整体架构设计,分析了其中的关键点,感谢大家~数字孪生现状数字孪生是将物理世界映射到数字世界,1比1还原真实场景,具有场景大、数据大、还原真实场景等特点。数字孪生行业市场大,预计2025年可达到300亿元的市场规模......
  • threejs - 渲染第一个3D场景 - 旋转的正方体
    1.安装threejs&使用2.创建三要素 场景scene相机camera渲染器render 3.场景newTHREE.Scene()  相机分为2种 1.透视相机2.正交相机 渲染器的使用 把canvas标签渲染到body页面document.body.appendChild(renderer.doLement); // 渲染canvasre......
  • 原生js图片截取并渲染页面
    一、将海报大图截屏部分图片并渲染页面二、实现代码如下<!DOCTYPEhtml><htmllang="zh"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Do......
  • 如何使用XSSFWorkbook读取文本薄?
    【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)https://www.cnblogs.com/cnb-yuchen/p/18146625出自【进步*于辰的博客】1、文件兼容类型。//兼容文件后缀列表privatestaticfinalStringFILE_TYPE;static{FILE_TYPE=".xls/.xlsx/.csv";}2、文......