问题:element-ui的树结构如果节点中有图片,收起或展开时,内容收起了,图片会卡顿一下晚一点收起。
导致的原因有可能是以下几种情况
图片加载:如果树形结构中的每个节点都包含图片,并且这些图片是动态加载的(例如,从远程服>务器加载),那么在折叠或展开节点时,浏览器可能需要花费额外的时间来加载和渲染这些图片。这可能导致视觉上的卡顿或延迟。
DOM 操作:折叠或展开树形结构的节点时,element-ui 会对 DOM 进行相应的操作。如果树形结构很大,包含很多节点和图片,这些 DOM 操作可能会变得复杂且耗时,从而导致卡顿。
JavaScript 执行:折叠或展开操作可能涉及到复杂的 JavaScript 逻辑,特别是当树形结构是动态生成或包含复杂数据时。大量的 JavaScript 计算或数据处理可能会阻塞主线程,导致界面卡顿。
浏览器渲染:当树形结构中的节点被折叠或展开时,浏览器需要重新计算布局并渲染新的 DOM 结构。如果这个过程涉及到大量的图片或复杂的样式,渲染可能会变得缓慢,导致卡顿。
资源限制:如果设备的 CPU、内存或网络带宽等资源有限,那么在处理大量的图片和 DOM 操作时,可能会更容易出现卡顿现象。
优化:
建议使用字体图标库。
但是我们ui设计师不提供字体图片,直接甩张图片,(╯▔皿▔)╯气的想刀人!!!!!!!!!!!!
继续找原因解决:
只能展开的时候手动让图标展示,收起时,在手动隐藏,代码如下
<el-tree
ref="tree"
:data="tree_data"
accordion
node-key="id"
@node-collapse="handleNodeCollapse"
@node-expand="handleNodeExpand">
<span class="custom-tree-node" slot-scope="{ node, data }">
<i style=
Element-UI树形组件中图片加载卡顿问题及优化策略

文章讨论了在Element-UI树形组件中,由于图片动态加载、DOM操作复杂性、JavaScript执行和浏览器渲染等因素导致的卡顿问题。作者提供了手动控制图片显示的临时解决方案,并呼吁设计师考虑使用字体图标库以提高性能。
最低0.47元/天 解锁文章
7489

被折叠的 条评论
为什么被折叠?



