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

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

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

      1. 首先进入页面发送http请求获取到大屏报表的配置参数。
      2. 赋值给页面绑定参数后就开始渲染页面，这时配置参数里的图片是缩略图，因缩略图体积很小，页面可以快速渲染。
      3. 接着将图片参数从配置参数中获取出来更改成高清图片路径按照可识别位置的方式缓存到提前定义好的参数中。
      4. 利用 new imange() 的 onload 方法去获取高清的图片，等高清图片资源获取到后，到配置参数指定位置更换图片参数路径。这时，页面就会渲染高清的图片。
      5. 高清和缩略图的图片存储可采用同级目录下新建一个 （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 != '' && el.bgimage != undefined) {
                this.onloadImgs[index] = {
                  url: el.bgimage
              if (el.data.type == 'image') {
                if (el.data.datacon.img != '' && el.data.datacon.img != undefined) {
                  this.onloadImgs[index] = {
                    url: el.data.datacon.img
            for (let key in this.onloadImgs) {
              let imgArr = this.onloadImgs[key].url.split('/')
              imgArr[imgArr.length - 2] = 'initial' // 将缩略图的 thumbnail 换成 initial
              let url = imgArr.join('/')
              let image = new Image() // 新建图片对象
              image.src = this.host + url  // host 为服务器地址 ，一般图片存储路径不用存ip地址，保留对应后面得路径即可，使用时再拼接，方便后台服务迁移。
              image.onload = () => {
                console.log('图片加载回来')
                if (key == 'bg') { // 图片加载完后按照前设定的位置识别符 key的值更换对应的图片路径
                  that.chartData.bgimage = url
                } else {
                  if (that.chartData.elements[key].data.type == 'image') {
                    that.chartData.elements[key].data.datacon.img = url
                  } else {
                    that.chartData.elements[key].bgimage = url
                image = null;// 在图片载入完后清理图片对象，避免占用内存。
      代码示例二，在交互编辑时载入图片
       
      // 代码环境 vue 
      imgUrl:图片路径
      presume:图片类型，也是图片位置标识符一。
      index：图片位置标示符二
       imgOnload (imgUrl,presume,index) { // 在选择图片后，将拿到缩略图的路径，赋值给指定数据，会直接加载缩略图，然后再调用自定义的imgOnload（）预加载方法。
            let that = this;
            let imgPathArr = imgUrl.split('/')
            let pathName = imgPathArr[imgPathArr.length - 2]
            if (pathName == 'thumbnail') { // 判断路径是缩略图路径再去加载高清图
              imgPathArr[imgPathArr.length - 2] = 'initial'  // 将缩略图路径修改为高清图
              let url = imgPathArr.join('/') // 高清图路径
              let image = new Image();
              image.src = this.host + url; // 记得拼接上服务器地址，没有请求头的路径不会去服务器载入图片的
              image.onload = () => {
                console.log('选择后图片加载')
                that.setChartDataImg(url,presume,index) // 传入新的高清图路径，调用指定的设置方法，更新配置参数指定的图片参数
                image = null;
      注意：避免图片载入时间过长设置函数需提前传入位置参数去控制载入后的url该改哪个位置，如例子二的位置参数是一路传下来的。
       
       
      采用参数的方式，更灵活使用，可用于图片背景 style.backgroundImage = url('${encodeURI(this.host + item.bgImage)}') ，也可以用于 img 标签的 src路径
      图片可随意上传服务器，便于使用。
      让用户体会到图片是有的，还在加载，而不是毫无反应。
       
                                          CSS图片优化就是尽量压缩图片的大小，加快页面加载速度，这对于大型网站是很有用的。不要小看它，它可以大大提高网页加载速度。通常大家用到的方法就是css sprites。
      　　CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。想必很多人已经在用这个技术，我给大家简单介绍一下，总结一下我使用css sprite时的一些技巧。　　CSS Sprites实现方法：
      　　首先将小图片整合到一张大的图片上，然后根据具体图标在大图上的位置，给背景定位。　　CSS Sprites技术要点总结：
      　　1. 小图片整合时，按照从上到下的顺序，而不要一个图
                                          使用骨架屏：骨架屏是需要自己画的，你需要把布局画好做成一个组件，在需要的页面引用，然后等数据请求回来以后隐藏掉再显示正常的页面就可以。通常仅仅在接口请求比较多的页面用到骨架屏，路由懒加载：webpack打包时会把懒加载的路由组件打包成单独的js bundle，在出发时再调用。预渲染： 使用 Preload/Prefetch 优化。解决首次登录，加载缓慢的过程。
                                          点击上方 "程序员小乐"关注, 星标或置顶一起成长 第一时间与你相约 每日英文 Promise yourself to be so strong that nothing can disturb your peace of mind. 对自己承诺：我要强大到任何事情都无法破坏我内心的平和。 每日掏心话 每一发奋努力的背后，必是有加倍的赏赐。莫要去找借口失败，只找理由成功。也许现在你正面临一些困难，...
                                          最近不要ECharts图表使用者的初学者均在询问如何通过ajax异步获取数据，动态赋值给echarts图表对象，因为这样一来，我们就可以实现图表数据动态呈现，后期加入时间戳即可实时刷新图表数据。正是基于这样一个环节比较重要，所以我也利用时间专门写了几篇关于如何通过ajax异步获取图表数据并加载的文章。希望可以给初学者解决一些比较实际的问题。文中不妥当之处诚望指出日后并改之。
      这里我采用asp
      3)剪切图像到合适的尺寸2. 去掉不必要的插件
      禁用和删除不必要的插件3.减少DNS查询(DNS lookups)
      减少不同域名的数量将减少并行下载的数量，加速你的网站4.最小化重定向
      1)重定向增加了额外的HTTP请求，因此也增加了页面加载时间。
      然而有时重定向却是不可避免的，如链接网站的不同部分、保存多个域
      图片懒加载
      在渲染页面的时候，先将图片用一张默认图片代替，当图片到达浏览器可视区域时，才显示真实的图片。
      这样的好处是，可以减缓服务器负担，加快初始界面的渲染速度。
      实现方式：
      使用setTimeOut或setInterval定时器进行延迟加载
      条件加载，符合条件或触发事件后再进行异步下载
      通过滚动条监听用户距图片距离，快要到达之前进行加载
      // 通过滚动条监听用户距图片距离，到达进行加载
          let img = document.querySelector('img')
                                          话不多说，直接看效果：一个基本的数据大屏，一般都是要展示时间信息，这不必多说，大家都会。但是实时的天气数据我们怎么显示呢？权威的就是中央气象台的数据，那我们该怎样拿到这个数据嘞？项目内使用链接获取信息
      js进行异步请求获取响应的内容——>>>
      首先创建 XMLHttpRequest 对象：
      **XMLHttpRequest 用于在后台与服务器交换数据。**...