大屏报表异步获取数据后，渲染背景图片过于缓慢问题的解决方案（采用图片缩略图+懒加载方式）_接口获取的图片渲染成页面整屏背景,但特别慢怎么办-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44070450/article/details/110942781

本文介绍了解决大屏报表背景图片加载缓慢的问题，通过采用预先保存的缩略图和懒加载技术。首先展示缩略图以快速渲染页面，然后在后台异步加载高清图片，利用`new Image().onload`方法在图片加载完成后替换为高清图。这种方法提高了用户体验，允许图片存储在任意服务器并灵活应用于样式或img标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

- - 前提：项目大屏报表采用配置参数，其中backgroundImage背景图参数的使用，采用的是提前保存的缩略图的路径
  - - 注意：避免图片载入时间过长设置函数需提前传入位置参数去控制载入后的url该改哪个位置，如例子二的位置参数是一路传下来的。
- 方案优势

前提：项目大屏报表采用配置参数，其中backgroundImage背景图参数的使用，采用的是提前保存的缩略图的路径

首先进入页面发送http请求获取到大屏报表的配置参数。
赋值给页面绑定参数后就开始渲染页面，这时配置参数里的图片是缩略图，因缩略图体积很小，页面可以快速渲染。
接着将图片参数从配置参数中获取出来更改成高清图片路径按照可识别位置的方式缓存到提前定义好的参数中。
利用 new imange() 的 onload 方法去获取高清的图片，等高清图片资源获取到后，到配置参数指定位置更换图片参数路径。这时，页面就会渲染高清的图片。
高清和缩略图的图片存储可采用同级目录下新建一个（initial）高清图片文件夹和一个（thumbnail）缩略图文件夹，这样在图片路路径只有倒数第二个目录不同，如

高清图路径 :  /img/public/initial/img.png
缩略图路径 :  /img/public/thumbnail/img.png

代码示例一：（在异步获取到数据后存放到 chartData，调用自定义图片预加载函数preload，将图片路径集合缓存到 onloadImgs对象中，然后循环利用new image（）的onload 载入高清图）

// 代码环境 vue框架
preload () {
   
      let that = this
      if (this.chartData.bgimage != '' && this.chartData.bgimage != 'default') {
   
        this.onloadImgs['bg'] = {
   
          url: this.chartData.bgimage
        }
      }
      this.chartData.elements.forEach((el, index) => {
   
        // 图片预加载的路径处理
        if (el.bgimage !=