Vueの再書き込みと再構築のための画像読み込みパフォーマンスの最適化

序文

画像読み込みの最適化は、Webサイトのパフォーマンスに重要な役割を果たします。したがって、Vueを使用してウェーブを操作します。

備考

次の最適化1と最適化2の列はすべてVueのツール関数に自分でカプセル化されているため、注意深く読んでください。そうしないと、直接コピーするとエラーが発生しやすくなります。

資源

• Vue.js
• 要素UI

最適化1：画像読み込みアニメーション

画像は、画像が読み込まれ、読み込みアニメーションが終了した後にのみ表示できます。使用するものElement UIはloading组件、読み込みアニメーションとして使用されます。変数のloading初期値がtrue、画像が読み込まれたときであるとしますfalse。

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

最適化2：画像の遅延読み込み

画像がビューポート位置にある場合のみ、画像が要求されます。この最適化は、Webサイトのホームページだけでなく、より多くの写真を含むページでも使用してパフォーマンスを節約できます。さっそく、ウェーブを実装しましょう。

    // 获取图片距离   
    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);
  }
}

統合ツールキット

Vue足場プロジェクトを実行するとき、多くの場合、繰り返しコードセグメントまたはメソッド関数を多数使用するため、それをカプセル化して使用したいときに使用でき、コードの冗長性を回避できます。
1. srcルートディレクトリの下にutilフォルダーを作成し、その中にutil.jsを作成します
2. srcルートディレクトリの下のmain.jsに次のコードを入力して、util.jsを導入し、グローバルに登録します。

import utils from './util/util'

Vue.prototype.$utils=utils

3. util.jsを編集します。

export default {
    // 图片加载
    imgLoad:(src)=>{
      let bgImg = new Image();
      bgImg.src = src; // 获取背景图片的url
      bgImg.onerror = () => {
        console.log("img onerror");
      };
      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;
          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;
          }
      }
    }
}

例

ツール関数をカプセル化し、それを使用しthis.$utilsます。ここでは、各メソッドを呼び出します。

アプリケーション：画像読み込みアニメーション

このようなページで使用しています。this.bannerSrc画像のアドレスでthis.loadingあり、アニメーションの読み込みの状態です。

  mounted() {
    if (!this.$utils.imgLoad(this.bannerSrc)) {
      this.loading = false;
    }
  }

アプリケーション：画像の遅延読み込み

1.設定keep-aliveページ

  methods: {
    // 懒加载图片
    scrollView() {
      const fn = this.$utils.lazyload.bind(this.$utils);
      window.addEventListener("scroll", fn);
      // 离开组件
      this.$once("hook:deactivated", function() {
        window.removeEventListener("scroll", fn);
      });
    }
  },
  activated() {
    this.scrollView();
  },
  mounted() {
     this.$utils.lazyload(); // 初始化
  }

2. keep-aliveページの設定を解除する

  mounted() {
    this.$utils.lazyload();
    window.addEventListener("scroll", this.$utils.lazyload.bind(this.$utils));
  },
  beforeDestroy(){
    window.removeEventListener("scroll", this.$utils.lazyload.bind(this.$utils));
  }

著者：の酢ビのパス豆
の主要分野：フロントエンドの開発
私のマイクロ手紙：maomin9761
マイクロチャネル公共数：道路窮地のフロントエンド