uniapp を使用して遅延読み込み画像効果を実現する-uni-app-php.cn

uniapp を使用して遅延読み込み画像効果を実現する

PHPz

リリース： 2023-11-21 18:15:41

オリジナル

1300 人が閲覧しました

uniapp を使用して遅延読み込み画像効果を実現する

ユニアプリを使用して画像の遅延読み込み効果を実現する

モバイルインターネットの発展に伴い、画像はモバイルアプリケーションで重要な役割を果たします。ただし、読み込む画像が多すぎると、ページの読み込みが遅くなり、ユーザーエクスペリエンスに影響を与える可能性があります。この問題を解決するには、uniapp フレームワークが提供する遅延読み込み画像効果を使用します。これにより、必要な場合にのみ画像が読み込まれ、ページの読み込み時間を節約し、ユーザーエクスペリエンスを向上させることができます。

まず、uniapp 開発環境がインストールされ、uniapp プロジェクトが作成されていることを確認する必要があります。次に、コードを書き始めます。

Vue コンポーネントの作成
uniapp プロジェクトでは、独立した Vue コンポーネントを作成して、遅延読み込み画像効果を実現できます。 uniapp プロジェクトを開き、コンポーネントフォルダーに入り、「LazeImage」という名前のコンポーネントを作成します。
コンポーネントテンプレートの記述
「LazeImage」コンポーネントでは、画像を表示するためのテンプレートを記述する必要があります。これを実現するには、uniapp が提供する uni-image コンポーネントを使用します。コードは次のとおりです。

<template>
  <uni-image 
    src="{{ showImage ? imageUrl : placeholderUrl }}"
    @load="handleLoad" 
    @error="handleError" 
  ></uni-image>
</template>

ログイン後にコピー

上記のコードでは、二重中括弧 {{}} を使用して画像の src 属性をバインドします。条件により、showImageがtrueの場合はimageUrlの値が画像アドレスとして表示され、showImageがfalseの場合はplaceholderUrl##が表示されます。 # が表示され、その値がプレースホルダー画像アドレスとして使用されます。

次のステップでは、コンポーネントのロジックコードを作成する必要があります。「LazeImage」コンポーネントのscriptタグでは、
showImageとimageUrlという2つのデータを定義します。 showImage は画像を表示するかどうかを制御するために使用され、imageUrl は画像アドレスを保存するために使用されます。

コンポーネントの

created ライフサイクル関数では、showImage と imageUrl の値を初期化できます。。 showImage を false に初期化できます。これは、画像が表示されないことを意味します。 imageUrl は props 属性を通じて取得でき、コンポーネントが使用される場合、画像アドレスが属性を通じて渡されます。コードは次のとおりです:

<script>
  export default {
    props: {
      url: {
        type: String,
        required: true
      },
      placeholder: {
        type: String,
        default: 'placeholder.jpg'
      },
    },
    data() {
      return {
        showImage: false,
        imageUrl: ''
      }
    },
    created() {
      this.imageUrl = this.url;
    },
    methods: {
      handleLoad() {
        this.showImage = true;
      },
      handleError() {
        this.imageUrl = this.placeholder;
      }
    }
  }
</script>

ログイン後にコピー

上記のコードでは、画像の読み込み完了と読み込み失敗のイベントを処理するために、2 つのメソッド

handleLoad と handleError を定義しました。画像が正常に読み込まれたら、showImage の値を true に設定すると、画像がページに表示されます。画像の読み込みに失敗した場合は、imageUrl の値をプレースホルダー画像のアドレスに設定して、ページに常に画像が表示されるようにします。

これで、「LazeImage」コンポーネントの開発が完了しました。他のページでこれを使用すると、画像の遅延読み込みの効果を実現できます。

画像の遅延読み込みが必要なページでは、最初にコンポーネントをインポートする必要があります。ページの script タグに、次のコードを追加します。

import LazeImage from '@/components/LazeImage.vue'

ログイン後にコピー

次に、ページの template タグで、

タグを使用して、「LazeImage」を導入します。成分。同時に、属性 url を タグに追加して、画像アドレスを渡す必要があります。コードは次のとおりです。

<template>
  <view>
    <laze-image :url="imageSrc"></laze-image>
  </view>
</template>

ログイン後にコピー

上記のコードでは、

v-for ディレクティブを使用して、ループ内で複数の画像をレンダリングします。 imageSrc は、複数の画像のアドレスを格納する配列です。

「LazeImage」コンポーネントでは、プレースホルダー画像のアドレスとして
placeholderUrl を使用したことに注意してください。プレースホルダー画像をプロジェクトの static フォルダーに配置し、そのパスをコンポーネントの placeholder 属性に設定する必要があります。コードは次のとおりです。

<laze-image :url="imageSrc" placeholder="static/placeholder.jpg"></laze-image>

ログイン後にコピー

以上がuniapp を使用して遅延読み込み画像効果を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。