js实现图片过大加载比较慢,加载过程中添加 loading效果

// useImage
const useImage = (imgUrl: string): string => {
  /**
   * @method vite动态引入图片
   * @params folder 文件夹名称 name 文件名称 type 文件格式 一般为png/jpg/webp/gif等...
   * @returns 图片
   */
  return new URL(`../assets/${imgUrl}`, import.meta.url).href
}
export default useImage

-----------------------------------------------------------
import useImage from '@/hook/useImage'
const loadingUrl = useImage('img/loading2.gif')
//判断浏览器
let Browser = new Object()
Browser.userAgent = window.navigator.userAgent.toLowerCase()
Browser.ie = /msie/.test(Browser.userAgent)
Browser.Moz = /gecko/.test(Browser.userAgent)
//判断是否加载完成
function Imagess(url, callback, error) {
  let val = url
  let img = new Image()
  if (Browser.ie) {
    img.onreadystatechange = function () {
      if (img.readyState == 'complete' || img.readyState == 'loaded') {
        callback(img)
      }
    }
  } else {
    img.onload = function () {
      if (img.complete == true) {
        callback(img)
      }
    }
  }
  //如果因为网络或图片的原因发生异常，则显示该图片
  if (error) {
    img.onerror = error
  } else {
    img.onerror = function () {
      img.src = 'http://sunbrightness.gitee.io/csdn-material/img_loading/failed.png'
    }
  }
  img.src = val
}

//初始化需要显示的图片，并且指定显示的位置
export function img_loading() {
  let imglist = document.getElementsByClassName('img-data')
  for (let i = 0; i < imglist.length; i++) {
    let tt = imglist[i]
    //防止重复加载
    if (tt.loading == true) {
      continue
    }
    //没有该属性代表不加载
    if (!tt.getAttribute('src-data')) {
      continue
    }
    tt.loading = true
    tt.src = loadingUrl
    Imagess(tt.getAttribute('src-data'), function (obj) {
      tt.src = obj.src
      tt.removeAttribute('src-data')
    })
  }
}