大屏报告异步获取数据后,背景图片渲染缓慢问题的解决方案(采用图片缩略图+懒加载方式)

前端页面数据渲染服务器图片异步路径的懒加载

• • • 前提：项目大屏报表的展示依赖于配置参数，其中用于设定背景图的backgroundImage参数，所引用的是预先存储的缩略图路径。

      • • 注意：为防止图片加载耗时过长，应在函数调用初期即传递位置参数，以此控制加载完成后的url地址，需明确指定修改的位置，例如例子二中位置参数是沿调用链依次传递的。

    • 方案优势

背景图路径配置与缩略图应用

1. 首先访问目标页面并发出HTTP请求，以获取大屏报表的相关配置参数。
2. 将这些参数赋值给页面所绑定的变量后，页面开始进行渲染操作。此时配置参数中所包含的图片为缩略图形式，由于其体积较小，因此能够实现快速的页面加载与渲染。
3. 然后从配置参数中提取图片相关的参数，并将其替换为高清图片的路径，再依据可识别的位置信息将该路径缓存至预先设定好的变量中。
4. 借助 new Image() 对象的 onload 方法来加载高清图片资源，当高清图片成功获取后，将其路径替换至配置参数中指定的位置。此时页面将重新渲染并展示高清图片内容。
5. 在存储高清与缩略图时，可在同一级目录下分别创建一个名为（initial）的高清图片文件夹和一个名为（thumbnail）的缩略图文件夹。这样，在构建图片路径时仅需在倒数第二个目录层