フロントエンドが知っておくべき画像の読み込み方法

序文

フロントエンドの画像表示の読み込みは Web サイトの非常に重要な部分です。Web サイトの多くの画像は多くのスペースを占めます。Web サイトのパフォーマンスもユーザーのエクスペリエンスに影響します。良いエクスペリエンスはユーザーの「幸福度」を高めます。現在、多くの Web サイトでは画像が多くのリソースを占有していることが多く、画像が大きすぎると読み込み効率が悪く、より多くのリソースが占有され、読み込み表示が不完全になり、ユーザーに不快感を与えてしまいます。そこで、フロントエンドの画像読み込みにどのメソッドが使用されるかを簡単に理解しましょう。

基本的な使い方

<img src="https://img95.699pic.com/photo/50044/9004.jpg_wh300.jpg" alt="xxx">

通常、ページに表示される画像は img タグを使用して表示されており、これが最も直接的な方法ですが、問題も多くあります。現在のページの写真が大きく、多くの写真があり、ネットワークがあまり良くない場合、一部の写真が不完全に表示されたり、部分的に表示されたり、空白のページが表示されたりすることがあります。その後、対応する戦略を講じて改善していきます。

スクロールモニターローディング遅延ローディング

この例では、ページのスクロールを直接監視して位置を計算し、ページが対応する位置までスクロールすると、対応する画像コンテンツをロードします。

<div>
  <img class="lazy-load" src="https://source.unsplash.com/random/600" alt="">
  <img class="lazy-load" src="https://source.unsplash.com/random/700" alt="">
  <img class="lazy-load" src="https://source.unsplash.com/random/800" alt="">
  <img class="lazy-load" src="https://source.unsplash.com/random/900" alt="">
</div>
<style>
  div {
    
    
    margin-top: 350px;
  }
  .lazy-load {
    
    
    width: 200px;
    height: 150px;
  }
</style>
// 引入 lodash 库
<script src="https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.core.min.js"></script>  
let lazyImages = [...document.querySelectorAll('.lazy-load')]
let inAdvance = 300
function lazyLoad() {
    
    
    lazyImages.forEach(image => {
    
    
        if (image.offsetTop < window.innerHeight + window.pageYOffset + inAdvance) {
    
    
            image.src = image.dataset.src;   // 替换真实图片的  URL
        }
    })
}
lazyLoad();
window.addEventListener('scroll', _.throttle(lazyLoad, 50))
window.addEventListener('resize', _.throttle(lazyLoad, 50))

現在、京東、淘宝、その他の PC モールはこの方法を採用しており、現在表示可能な領域にアンロードされた写真があるかどうかを監視し、ない場合はロードされます。次の方法も遅延読み込みをスクロールする方法です。

交差点オブザーバー API

現在、操作に便利な Intersection Observer インターフェイスがあり、ターゲット要素と祖先要素またはトップレベルファイルの間の交差の変化を非同期的に観察できます。簡単に言うと、以前はスクロール監視イベント関数を自分で書く必要がありましたが、今はこの API が役に立ちます。観測関数を一律に記述するだけで済みます。観測したい要素がビューポートに入ると、その関数が表示されます。それを確認すると、適切なアクションを実行します。コード例:

<template>
  <div class="content">
    <img
      v-for="(item, index) in arr"
      :key="index"
      src="https://bpic.51yuansu.com/pic/cover/00/19/12/57b66d41d79ad_610.jpg?x-oss-process=image/sharpen,100"
      alt="网图"
      data-src="https://img95.699pic.com/photo/50044/9004.jpg_wh300.jpg"
    />
  </div>
</template>
<script lang="ts">
import {
    
    
  defineComponent,
  Directive,
  isMemoSame,
  onMounted,
  reactive,
} from "@vue/runtime-core";
export default defineComponent({
    
    
  setup() {
    
    
    const arr = new Array(30);
    onMounted(() => {
    
    
      const imgs = document.querySelectorAll("img[data-src]");
      const config = {
    
    
        rootMargin: "0px",
        threshold: 1,
      };
      let observer = new IntersectionObserver((entries, self) => {
    
    
        entries.forEach((entry) => {
    
    
          if (entry.isIntersecting) {
    
    
            let img: any = entry.target;
            let src = img.dataset.src;
            if (src) {
    
    
              img.src = src;
              //console.log(src)
              img.removeAttribute("data-src");
            }
            // 解除观察
            self.unobserve(entry.target);
          }
        });
      }, config);

      imgs.forEach((image) => {
    
    
        observer.observe(image);
      });
    });
    return {
    
    
      arr,
    };
  },
});
</script>

実行後、図のように下部のぼやけた絵がすべて視野に露出すると、上の青い絵のように表示されます。

クロムには付属しています

ブラウザのアドレスに chrome://flags/#enable-lazy-image-loading

と入力し、有効に設定します。コードは次のように使用されます。

<img src="https://source.unsplash.com/random/600" alt="" lazyload="on">

素晴らしい画像

AwesomeImage は遅延読み込み/プログレッシブ読み込み/レスポンス読み込み/自動 WebP をサポートし、vue2/vue3/nuxt と互換性のある汎用画像コンポーネントです使用方法ドキュメントのアドレスは以下の通りです AwesomeImage
のインストール
方法

yarn add @awesome-image/image
//或者
npm install @awesome-image/image

vueでの参照は以下の通り

import AsImage from '@awesome-image/image'
import '@awesome-image/image/dist/style.css'
createApp(App).use(store).use(AsImage,{
    
    
    responsive: true,//是否是响应
    progressive: true,//是否渐进加载
}).use(router).mount('#app')

図に示すように、main.ts 内の参照でエラーが発生する可能性があり、エラー内容が報告されたときに対応するライフが見つからない場合は、
画像.png
.d.ts ファイルで宣言モジュールを宣言できます。

declare module '@awesome-image/image';

基本的な使い方

画像サイズの設定
ピクチャースタイルを設定する
ロードスロットは、ロードする前にプレースホルダー要素として追加できます。

<style>
  .demoimage {
    
    
    width: 100%;
  }
  .loading {
    
    
    width: 100%;
    height: 100%;
    background: #eee;
  }
</style>
<template>
  <AsImage
    class="demoimage"
    :width="1280"
    :height="640"
    src="//cdn.com/image.jpg"
  >
    <template #loading>
      <div class="loading" />
    </template>
  </AsImage>
</template>

遅延読み込み

遅延読み込みでは、画像が表示可能領域に入ったときに IntersectionObserver を使用して画像を読み込みます。上記でも個別に説明しました。

遅延読み込みを有効にするかどうかを制御するには、lazy (デフォルト false) 属性を使用します。画像を事前に読み込むピクセル数を設定するには、imageLazyOffset (デフォルト 0px) を使用します。
プログレッシブ読み込みを同時に使用する場合は、placeholderLazyOffset (デフォルトは 0px) を使用して、サムネイル画像を何ピクセル前に読み込むかを設定します。

<style>
...
</style>
<template>
  <AsImage
    class="demoimage"
    :width="1280"
    :height="640"
    :lazy="true"
    :imageLazyOffset="1000px"
    src="//cdn.com/image.jpg"
  >
    <template #loading>
      <div class="loading" />
    </template>
  </AsImage>
</template>

プログレッシブローディング

プログレッシブ読み込みでは、48 ピクセルのスケール画像 (事前に生成するか、イメージサービスで動的に生成する必要がある) をプレースホルダーとして使用し、プレースホルダーと元の画像が読み込まれるときにフェードアニメーションを通じて滑らかに表示されます。クライアントが水を注入する前に、SSR モードでの画像のプログレッシブ読み込みをサポートします。

詳細については、 imageUrlGenerator を構成する必要があります。「対応する 48 ピクセルのサムネイル画像を取得する」を参照してください。
プログレッシブ (デフォルトは false) 属性を使用して、プログレッシブ読み込みを有効にするかどうかを制御します。
フェードインアニメーションの継続時間を制御するには、継続時間(デフォルトは 1、単位は秒)属性を設定します。

<template>
  <AsImage
    class="demoimage"
    :width="1280"
    :height="640"
    :progressive="true"
    src="//cdn.com/image.jpg"
  >
    <template #loading>
      <div class="loading" />
    </template>
  </AsImage>
</template>

応答負荷

レスポンシブロードでは、画面幅に応じて異なるサイズの画像を読み込みます（事前に生成するか、イメージサービスで動的に生成する必要があります）。

詳細については、 ImageUrlGenerator を構成する必要があります。「さまざまなサイズの画像 URL の取得」を参照してください。
応答 (デフォルトは false) 属性を使用して、応答の読み込みを有効にするかどうかを制御します
ブレークポイント (デフォルト [640、768、1024、1280、1536]) プロパティを使用して、オプションの画像幅を制御します
画像の幅の選択方法を制御するには、sizes (デフォルトは 100vw) 属性を使用します。

簡単な例

<template>
  <AsImage
    class="demoimage"
    :width="1536"
    :height="640"
    :responsive="true"
    src="//cdn.com/image.jpg"
  >
    <template #loading>
      <div class="loading" />
    </template>
  </AsImage>
</template>

画面幅に応じて 640、768、1024、1280、1536 サイズの画像をロードします。たとえば、画面幅が 1000px の場合、幅は 1024px になります。

複雑な例

<template>
  <AsImage
    class="demoimage"
    :width="1440"
    :height="640"
    :responsive="true"
    :sizes="(max-width: 640px) 100vw, (max-width: 1200px) 1000px, 50vw"
    :breakpoints="[640, 1024, 1440]"
    src="//cdn.com/image.jpg"
  >
    <template #loading>
      <div class="loading" />
    </template>
  </AsImage>
</template>

上記では以下を表すために使用されます。

画面幅が 640px 未満の場合は、ブレークポイントに対応する幅 100% の画像を選択し、幅 640px の画像をロードします。
画面幅が 1200px 未満の場合、ブレークポイントに対応する 1000px の幅に従って画像を選択し、1024px の幅の画像をロードします
それ以外の場合は、ブレークポイントに対応する 50% の幅 (実際の使用では幅は CSS で 50% に設定されます) に従って画像を選択し、次のようにします。
- 画面の幅が 1280px 未満で、読み込み幅が 640px の画像です
- 画面の幅が 2048px 未満で、読み込み幅が 1024px の画像です
- 画面の幅が 2880px 未満で、読み込み幅が 1440px の画像です

WebP をロードする

一部のイメージサービスプロバイダーや自社開発サービスでは、WebP 形式の画像を自動的に読み込む機能を提供していますが、自動互換に対応していない場合は、auto-webp を true (デフォルトは false) に指定することで、WebP との互換機能を追加できます。互換性のあるブラウジングのために、ブラウザは WebP 画像を自動的に読み込みます。

<template>
  <AsImage
    class="demoimage"
    :width="1280"
    :height="640"
    :auto-webp="true"
    src="//cdn.com/image.jpg"
  >
    <template #loading>
      <div class="loading" />
    </template>
  </AsImage>
</template>

//cdn.com/image.jpg?format=webp は上記のようにロードされます (特定の URL については imageUrlGenerator を参照してください)。

その他の画像処理パラメータ

Quanlity は画質を指定します
format は画像形式を指定します

<template>
  <AsImage
    class="demoimage"
    :width="1280"
    :height="640"
    :quanlity="90"
    :format="png"
    src="//cdn.com/image.jpg"
  >
    <template #loading>
      <div class="loading" />
    </template>
  </AsImage>
</template>

//cdn.com/image.jpg?quanlity=90&format=png は上記のようにロードされます (特定の URL については imageUrlGeneratorを参照してください)。

素晴らしい画像概要

プラグインには画像をロードするためのさまざまな方法があり、プロジェクト内の画像の処理に適応できます。wenGL もロードされており、興味のある学生は公式 Web サイトにアクセスして確認して学ぶことができます。

プログレッシブ画像表示の読み込み

Vue はプログレッシブ画像プラグイン表示を使用します

npm install progressive-image --save

main.jsで参照されています

import progressive from 'progressive-image/dist/vue'; // 渐进式
import 'progressive-image/dist/index.css';//样式
 Vue.use(progressive, {
    
    
   	removePreview: true,
   	scale: true
 })

ページコードは次のとおりです

<template>
    <div class="progressive">
      <img class="preview" v-progressive="http://7xiblh.com1.z0.glb.clouddn.com/progressive/2.jpg"  src="http://7xiblh.com1.z0.glb.clouddn.com/progressive/r2.jpg" />
    </div>
 </template>

srcSetのレスポンシブロード

現在の画面のサイズに応じて、対応する画像が読み込まれるため、リソースの無駄が削減されます。コード例は次のとおりです。

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w,1.jpg 1000w", sizes="300px">

現在設定されている画像サイズと画像上のコードに従って、対応する画像を表示します。サイズを300pxに設定すると2.png画像が表示され、1200pxに変更すると1.jpg画像が表示されます。srcset の順序は、最終的な表示結果には影響しません。

背景画像の遅延読み込み方式

vue-lazyLoad

vue で使用されるプラグインは vue-lazyLoad で、次のように使用されます。

// npm or cnpm
(c)npm install vue-lazyLoad --save-dev
// yarn
yarn add vue-lazyLoad -D

main.tsでは次のように参照されます

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueLazyLoad from "vue-lazyload"
createApp(App).use(store).use(VueLazyLoad,{
    
    
    preLoad:1,//如果该参数没有就是初始全部加载 范围时0-1 是距离顶部距离多少进行加载
}).use(router).mount('#app')

コードで使用される例は次のとおりです

//html
<div class="boximag" v-lazy:background-image="require('../assets/img/1.jpeg')"></div>
//css
.boximag{
    width: 100%;
    height: 300px;
    border: 1px solid #ccc;
    background-repeat: no-repeat;
    background-size: cover;
}

上記のコードは背景の遅延ロードです。画像の遅延ロードの場合、コードは次のようになります。

<img v-lazy="require('../assets/img/1.jpeg')">

v-bind:src の代わりに v-lazy を使用すると、読み込みに対応する位置へのスクロールも行われます
画像.png
。main.ts でパラメータ preLoad が 0.5 に設定されている場合、ページ画像の効果は上記の最初の画像のようになります。は正常に表示され、2 番目の 1 番目と 3 番目の画像は現在のページの中央に到達せず、空として表示されます。

vue3-lazy

vue 遅延読み込みプラグイン vue3-lazy もあります

// npm or cnpm
npm install vue3-lazy -S
// yarn
yarn add vue3-lazy

コードは次のように引用されます

import lazyPlugin from 'vue3-lazy'

createApp(App)
  .use(lazyPlugin, {
    
    
    loading: require('@/assets/images/default.png'), // 图片加载时默认图片
    error: require('@/assets/images/error.png')// 图片加载失败时默认图片
  })
  .mount('#app')

コード例を使用する

<img v-lazy="require('../assets/img/1.jpeg')">

画像タグを使用する vue-lazyLoad と同じ方法で使用されますが、背景画像の遅延読み込みメソッドがありません。ご自身の利用シーンに合わせてご利用いただけます。

要約する

フロントエンドイメージを読み込む方法は数多くあり、アプリケーションシナリオも異なります。画像の読み込みプロセスにも多くの問題があります。Web サイトをより快適に使用するには、継続的に最適化する必要があります。これはフロントエンドが学習する必要があります。まとめていないコンテンツがたくさんあるかもしれません。もっと良い方法があれば教えてください。一緒に学び、成長していきましょう。

参考文献

https://github.com/hilongjw/vue-lazyload
https://github.com/ustbhuangyi/vue3-lazy
https://awesome-image.vercel.app/
https://zhuanlan.zhihu.com/p/ 323174003