PHPで開発した画像をWeChatミニプログラムに遅延読み込みする実装方法

モバイルインターネットの急速な発展に伴い、新しいアプリケーションフォームとしてミニプログラムがますます多くの人々に支持されています。小さなプログラムの開発では、画像表示は非常に一般的な要件であり、遅延読み込みは非常に便利な手法の 1 つです。

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

遅延読み込みとは、ページの読み込み速度とユーザー エクスペリエンスを向上させるために、ページが表示領域までスクロールするときに画像を読み込むことを意味します。 WeChat ミニ プログラムでは、遅延読み込みテクノロジを使用することで、ページを開いたときのトラフィックを削減し、帯域幅を節約できます。また、ユーザー エクスペリエンスも向上し、ページの読み込みが速くなったように感じられます。

WeChat アプレットで画像の遅延読み込みを実装するにはどうすればよいですか?

ミニ プログラムで PHP スクリプトを使用することで、画像の遅延読み込みを実装できます。ユーザーがアプレットを開くと、PHP スクリプトは遅延ロードが必要なすべての画像を走査し、各画像の URL を配列に保存します。ユーザーがページをスクロールすると、アプレットは AJAX リクエストを発行し、サーバーから画像の URL を格納する配列を取得し、遅延ロードする必要がある画像の位置に対応する画像をロードします。

具体的な実装手順は次のとおりです。

1. 遅延読み込みが必要なすべての画像をスキャンし、各画像の URL を配列に保存します。 PHP コードは次のとおりです。

$urls = array();
$imgs = glob("images/*.jpg");
foreach($imgs as $img) {
    $url = "http://example.com/".$img;
    array_push($urls, $url);
}

2. アプレット内で AJAX リクエストを発行して、画像 URL を格納する配列をサーバーから取得します。アプレットは、wx.request メソッドを使用して AJAX リクエストを発行し、responseType を json に設定します。コードは次のとおりです。

wx.request({
    url: 'http://example.com/geturls.php',
    method: 'GET',
    responseType: 'json',
    success: function(res) {
        var urls = res.data.urls;
    }
})

3. ページ スクロール イベントをリッスンし、遅延ロードする必要がある画像の位置に従って、その位置に対応する画像をロードします。アプレットは、wx.createIntersectionObserver メソッドを使用してページ スクロール イベントを監視し、遅延ロードする必要がある画像が表示領域に入ったかどうかを判断します。
4. リスナーのobserveメソッドで、遅延読み込みが必要な画像が可視領域に入っているかどうかを判定し、入っている場合は、対応する画像タグのsrc属性に画像のURLを代入して遅延読み込みを実装します。画像。 。コードは次のとおりです。

var observer = wx.createIntersectionObserver();
observer.relativeToViewport({bottom: 100}).observe('.lazyload', (res) => {
    if (res.intersectionRatio > 0) {
        var index = res.dataset.index;
        var url = urls[index];
        var img = this.data.list[index];
        img.src = url;
        this.setData({
            list: this.data.list
        });
    }
})

概要

上記は、PHP スクリプトを使用して、WeChat ミニ プログラムで画像の遅延読み込みを実装する方法です。遅延読み込みテクノロジーを使用すると、ページの読み込み速度とユーザー エクスペリエンスが向上し、ページを開いたときのトラフィックが削減され、帯域幅が節約されます。この記事が皆さんのミニプログラム開発の実践にインスピレーションを与えることができれば幸いです。

以上がPHPで開発した画像をWeChatミニプログラムに遅延読み込みする実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。