uniapp の遅延ロードが有効にならない

モバイル インターネットの発展と普及に伴い、モバイル開発に uniapp の使用を選択する人が増えています。 uniapp の開発において、遅延読み込みはページの読み込み速度を最適化し、ユーザー エクスペリエンスを向上させるのに役立つ非常に重要なテクノロジーです。ただし、遅延読み込みが有効にならない場合があるため、この記事ではこの問題について説明します。

1. uniapp 遅延読み込みとは何ですか?

遅延読み込みは、ページのスクロール時に画像やその他のメディア リソースを動的に読み込む最適化戦略です。これらのリソースは、表示範囲に入ったときにのみ実際に読み込まれるため、最初の読み込みに必要な時間が短縮されます。ページの読み込みを高速化します。 uniapp では、lazy-load 属性を設定するか、uni.loadImage インターフェイスを使用して、遅延読み込みを実装できます。

2. uniapp の遅延読み込みが失敗するのはなぜですか?

uniapp で遅延読み込みを使用しているのに有効にならない場合は、次のような理由が考えられます:

1. コンテナ要素の高さが設定されていません

Inコンテナ要素 (たとえば、div で遅延読み込みが使用されている場合)、コンテナ要素の高さは固定されている必要があります。そうでないと、ブラウザはオブジェクトが表示領域内にあるかどうかを判断できません。したがって、コンテナ要素に高さが設定されていない場合、遅延読み込みは失敗します。

たとえば、次のコード:

<div style="height:1000px;">
  <img src="/static/img.jpg" lazy-load />
</div>

この例では、コンテナ要素 div の高さは固定されていますが、picture 要素には幅と高さがありません。コンテナ要素が動的にロードされる場合、コンテナ データがロードされた後に高さを再計算する必要があることに注意してください。

2. IntersectionObserver の観測スコープを設定する

IntersectionObserver は要素の遅延読み込みを実装できる新しい API ですが、観測スコープ (ルート) があります。範囲が指定されている場合、遅延ロードは失敗します。

たとえば、次のコード:

<view>
  <image src="/static/img.jpg" root="{{root}}" lazy-load />
</view>

<script>
export default {
  data () {
    return {
      root: '#my-root'
    }
  },
  mounted () {
    const observer = uni.createIntersectionObserver().relativeToViewport({
      bottom: 50
    })
    observer.observe('.lazy-load', () => {
      console.log('image lazy load')
    })
  }
}
</script>

この例では、IntersectionObserver のルート パラメーターを設定することで観測範囲を指定するため、観測された要素が表示領域に入ったときに実行されます。遅延ロードのコールバック関数。 root パラメータが設定されていない場合、デフォルトでビューポートが観察スコープになります。

3. 画像はキャッシュされました

画像がブラウザによってキャッシュされると、それが表示領域にあるかどうかに関係なく、ブラウザは画像リソースを再度要求することはありません。キャッシュから画像リソースを直接取得します。したがって、この場合、遅延読み込みも失敗します。

3. uniapp の遅延読み込み失敗の問題を解決するにはどうすればよいですか?

1. uni.loadImage インターフェイスを使用する

uni.loadImage は、uniapp によって提供される画像読み込みインターフェイスであり、遅延読み込みを実装できます。すべての画像を読み込むことなく、必要なときに動的に画像を読み込めるのが特徴です。このインターフェイスを使用すると、LazyLoad エラーの多くの問題を解決できます。 uni.loadImageの使い方については、公式ドキュメントに詳しい紹介があるので、ここでは詳しく説明しません。

2. IntersectionObserver の使用

IntersectionObserver を使用して要素の遅延読み込みを実装する場合は、ルート要素 (root) を空またはビューポートに設定することを検討できます。この方法では、観測範囲の問題により遅延読み込みが失敗することはありません。

たとえば、次のコード:

<view>
  <image src="/static/img.jpg" lazy-load />
</view>

<script>
export default {
  mounted () {
    const observer = uni.createIntersectionObserver().relativeToViewport({
      bottom: 50
    })
    observer.observe('.lazy-load', () => {
      console.log('image lazy load')
    })
  }
}
</script>

この例では、観測範囲 (ルート) を指定しなかったため、その観測範囲はデフォルトでビューポートになり、遅延読み込みが成功します。 。

3. 画像の幅、高さ、高さを設定します

画像の幅、高さ、高さを正しく設定すると、遅延読み込みの効果がより良くなります。ブラウザは画像のサイズを判断できるため、画像が表示可能領域内にあるかどうかをより適切に判断できます。したがって、遅延読み込みを使用する場合は、画像の幅と高さを同時に設定する必要があります。

たとえば、次のコード:

<view>
  <image src="/static/img.jpg" style="width:100%;height:300px;" lazy-load />
</view>

この例では、画像要素が表示領域内にあるかどうかをブラウザがより正確に判断できるように、画像要素の幅と高さを設定します。

概要:

遅延読み込みはモバイル開発において不可欠なテクノロジであり、ページの読み込み速度とユーザー エクスペリエンスを向上させることができます。 uniapp で遅延読み込みを実装する方法はたくさんありますが、遅延読み込みが失敗する場合があります。この記事では、LazyLoad が失敗する 3 つの原因とその解決方法を紹介し、皆様が Lazy Loading テクノロジをより有効に活用できるように支援することを願っています。

以上がuniapp の遅延ロードが有効にならないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。