Vue回炉重造之图片加载性能优化

2022-05-13 20:01:05 阅读：148 来源： 互联网

标签：src Vue 重造 img 回炉 let 加载 document 图片

前言

图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。
备注

以下的优化一、优化二栏目都是我自己封装在Vue的工具函数里，所以请认真看完，要不然直接复制的话，容易出错的。
资源

Vue.js
Element UI

优化一：图片加载动画

只有当图片加载完成后才可以显示图片，加载动画结束。我们使用Element UI中的loading组件来用作加载的动画。假设一个变量loading初始值为true，当图片加载完时为false。

// 图片加载
imgLoad:(src)=>{
  let bgImg = new Image();
  bgImg.src = src; // 获取背景图片的url
  bgImg.onerror = () => {
    console.log("img one rror");
  };
  bgImg.onload = () => {
    // 等背景图片加载成功后 去除loading
    console.log("加载完成");
    return false
  };
},

优化二：图片懒加载

当图片处于视口位置时，才会请求图片。这个优化不仅可以用在网站首页，还可以用在图片比较多的网页，节约性能。话不多说，我们来实现一波。

// 获取图片距离   
getRect(element) {
  const rect = element.getBoundingClientRect();
  const top = !document.documentElement.clientTop ? document.documentElement.clientTop : 0;
  const left = !document.documentElement.clientLeft ? document.documentElement.clientLeft : 0;
  return {
      top: rect.top - top,
      bottom: rect.bottom - top,
      left: rect.left - left,
      right: rect.right - left
  }
},
// 封装图片懒加载
lazyload() {
  let img = document.getElementsByTagName("img");
  let len = img.length;
  let n = 0; // 存储图片加载到的位置，避免每次都从第一张图片开始遍历
  // 可见区域高度
  const seeHeight = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
  for (let i = n; i < len; i++) {
      // 如果图片距顶部距离小于可见区域高度与滚动条距离顶部高度之和时，才显示图片
      let rectTop = this.getRect(img[i]).top;      // 这里的this.getRect()是用来获取图片位置的。
      let rectBottom= this.getRect(img[i]).bottom;
      if (rectTop > 0 && rectTop < seeHeight && rectBottom > 0 && rectBottom < seeHeight) { // 已经在视口
          img[i].getAttribute("src") === ""?(img[i].setAttribute('class', 'opacity'),img[i].src = img[i].getAttribute("data-src")):n = i + 1;
      } else if(rectTop < seeHeight && rectBottom >= seeHeight){ // 正在进入视口
          img[i].getAttribute("src") === ""?(img[i].setAttribute('class', 'opacity'),img[i].src = img[i].getAttribute("data-src")):n = i + 1;
      }
  }
}

这里的设置类名opacity可以自己根据喜欢的动画设置。我这里写的是这样的，可以参考一下。

.opacity {
animation: 0.3s ani linear;
}
@keyframes ani {
0% {
opacity: 0;
transform: translateX(-200px);
}
100% {
opacity: 1;
transform: translateX(0px);

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119116745

标签：src,Vue,重造,img,回炉,let,加载,document,图片
来源： https://www.cnblogs.com/wangchuanxinshi/p/16267947.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue回炉重造之图片加载性能优化