モバイルインターネットの急速な発展に伴い、新しいアプリケーションフォームとしてミニプログラムがますます多くの人々に支持されています。小さなプログラムの開発では、画像表示は非常に一般的な要件であり、遅延読み込みは非常に便利な手法の 1 つです。
遅延読み込みとは何ですか?
遅延読み込みとは、ページの読み込み速度とユーザー エクスペリエンスを向上させるために、ページが表示領域までスクロールするときに画像を読み込むことを意味します。 WeChat ミニ プログラムでは、遅延読み込みテクノロジを使用することで、ページを開いたときのトラフィックを削減し、帯域幅を節約できます。また、ユーザー エクスペリエンスも向上し、ページの読み込みが速くなったように感じられます。
WeChat アプレットで画像の遅延読み込みを実装するにはどうすればよいですか?
ミニ プログラムで PHP スクリプトを使用することで、画像の遅延読み込みを実装できます。ユーザーがアプレットを開くと、PHP スクリプトは遅延ロードが必要なすべての画像を走査し、各画像の URL を配列に保存します。ユーザーがページをスクロールすると、アプレットは AJAX リクエストを発行し、サーバーから画像の URL を格納する配列を取得し、遅延ロードする必要がある画像の位置に対応する画像をロードします。
具体的な実装手順は次のとおりです。
$urls = array(); $imgs = glob("images/*.jpg"); foreach($imgs as $img) { $url = "http://example.com/".$img; array_push($urls, $url); }
wx.request({ url: 'http://example.com/geturls.php', method: 'GET', responseType: 'json', success: function(res) { var urls = res.data.urls; } })
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 サイトの他の関連記事を参照してください。