遅延読み込みとは何ですか?ミニプログラムでの画像の遅延読み込みの 2 つの実装方法-ミニプログラム開発-php.cn

遅延読み込みとは何ですか?ミニプログラムでの画像の遅延読み込みの 2 つの実装方法

不言

リリース： 2018-09-10 15:45:23

オリジナル

9601 人が閲覧しました

この記事の内容は遅延読み込みとは何か？ミニプログラムでの画像の遅延読み込みの 2 つの実装方法は、参考になると思います。

定義

遅延読み込みは、フロントエンドの人々に知られているパフォーマンス最適化方法です。簡単に言うと、画像がブラウザの表示領域に表示される場合にのみ、画像の真のパスが設定されます。表示される画像。これは画像の遅延読み込みです。

実装原理

ページのスクロールイベントをリッスンし、ページからの要素の上部の値がページの視覚的な高さ以下かどうかを判定します

判定ロジックのコードは以下の通りです

要素.getBoundingClientRect().top

ミニプログラムページのスクリプトロジックは JsCore で実行されるため、Window は使用できません。スクリプト内でコンポーネントを操作することはできません。

画像の遅延読み込みに関しては、データについて大騒ぎする必要があります。

ページ

ページでは、データの特定のフィールドに基づいて画像を表示するかどうかを判断するだけで済みます。フィールドが false の場合、デフォルトの画像が表示されます。

コードは次のようになります

<view>
    <image></image>
</view>

ログイン後にコピー

レイアウトは非常にシンプルです。 view コンポーネントに画像があり、list をループして表示します。がありますview组件里面有个图片，并循环list，有多少就展示多少

image组件的src字段通过每一项的show来进行绑定，active

image コンポーネントの src フィールドは、各項目の show を介してバインドされています。透明な遷移

スタイル

image{
    transition: all .3s ease;
    opacity: 0;
}
.active{
    opacity: 1;
}

ログイン後にコピー

ロジック

この記事では主に遅延読み込みについて説明するため、データはページ上に記述されます

データ構造は次のとおりです:

遅延読み込みとは何ですか?ミニプログラムでの画像の遅延読み込みの 2 つの実装方法

遅延実装には2つのメソッドを使用します準備はできていますか? さあ、楽しくコーディングしてください。

WXML ノード情報

アプレットは、createSelectQuery の呼び出しをサポートして SelectorQuery インスタンスを作成し、select メソッドを使用してノードを選択し、boundingClientRect を通じてノード情報を取得します。

wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{
    console.log(ret)
}).exec()

ログイン後にコピー

表示結果は以下の通りです

遅延読み込みとは何ですか?ミニプログラムでの画像の遅延読み込みの 2 つの実装方法
ミニプログラムには、ページのスクロールを監視するために使用されるonPageScroll関数があることをこっそりお伝えします。

画面の高さを含むシステム情報を取得できるgetSystemInfo関数もあります。

次に、明確に考えてみましょう。まだ上記のロジックのままです。ここではメインのロジックだけを書きます

showImg(){
    let group = this.data.group
    let height = this.data.height  // 页面的可视高度
    
    wx.createSelectorQuery().selectAll('.item').boundingClientRect((ret) => {
     ret.forEach((item, index) => {
       if (item.top  これで、画像の遅延読み込みの小さなプログラムが完成しました。実装方法は変わっていません。何か新しいことを学びましょう。 <h3></h3>ノードレイアウト交差ステータス<p></p>ノード交差ステータスとは何ですか? IntersectionObserver と呼ばれる新しい API です。この記事では簡単な使用法のみを説明します。詳細については、クリックしてください。アプレットで指定されている定義は、ノード レイアウトの交差ステータス API を使用して 2 つを監視できることです。または レイアウト位置における複数のコンポーネント ノードの交差状態。この API セットは、多くの場合、特定のノードがユーザーに表示されるかどうか、およびユーザーに表示される割合はどれくらいかを推測するために使用できます。 <p></p> 設計には 5 つの主要な概念があります。 <p></p> 参照ノード: 特定の参照ノードのレイアウト領域が参照領域として使用されます。複数の参照ノードがある場合、レイアウト領域の交差部分を使用します<p></p> 対象ノード: 監視対象となるノードは1つだけです<p></p> 交差面積: 対象ノードと参照ノードの交差部分です<p></p> 交差率: 対象ノードと参照ノードの交差率です参照ノード<p></p>しきい値: 複数存在する可能性があり、デフォルトは [0] で、[0.2, 0.5] などの交差比率として理解できます<p></p> 以下の 5 つの API があります<p></p>1。 ([this], [options])、名前を知って IntersectionObserver を作成します 例 <p></p>2. IntersectionObserver.relativeTo(selector, [margins])、参照領域としてノードを指定します margins パラメーターは参照を拡大または縮小できます。領域には、上、左、下、右を含めることができます。 3.交差Observer.relativeToViewport([マージン])、参照領域としてページ表示領域を指定します<p></p>4.交差点Observer.observer(targetSelector, callback)、パラメーターは次のとおりです。指定されたリスニング ノードとコールバック関数。この関数は、ターゲット要素の交差状態が変化するとトリガーされます。コールバック関数には、以下で説明する結果が含まれています<p></p>5。関数はトリガーされなくなります<p></p>次に、コールバック関数の結果について説明します。それに含まれるフィールドは次のとおりです。

ログイン後にコピー

字段名	类型	说明
intersectionRatio	Number	相交比例
intersectionRect	Object	相交区域的边界，包含 left 、 right 、 top 、 bottom 四项
boundingClientRect	Object	目标节点布局区域的边界，包含 left 、 right 、 top 、 bottom 四项
relativeRect	Object	参照区域的边界，包含 left 、 right 、 top 、 bottom 四项
time	Number	相交检测时的时间戳

我们主要使用intersectionRatio进行判断，当它大于0时说明是相交的也就是可见的。

先来波测试题，请说出下面的函数做了什么，并且log函数会执行几次

1、
wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => {
     console.log('监听box组件触发的函数')   
 })
 
2、
wx.createIntersectionObserver().relativeTo('.box').observer('.item', (result) => {
     console.log('监听item组件触发的函数') 
})

3、
wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => {
    if(result.intersectionRatio > 0){
        console.log('.box组件是可见的') 
    }
})

ログイン後にコピー

duang，揭晓答案。

第一个以当前页面的视窗监听了.box组件，log会触发两次，一次是进入页面一次是离开页面

第二个以.box节点的布局区域监听了.item组件，log会触发两次，一次是进入页面一次是离开页面

第三个以当前页面的视窗监听了.box组件，log只会在节点可见的时候触发

好了，题也做了，API你也掌握了，相信你已经可以使用IntersectionObserver来实现图片懒加载了吧，主要逻辑如下

let group = this.data.group // 获取图片数组数据
for (let i in this.data.group){   wx.createIntersectionObserver().relativeToViewport().observe('.item-'+ i, (ret) => {
       if (ret.intersectionRatio > 0){
         group[i].show = true 
       }
       this.setData({
         group
       })
     })
}

ログイン後にコピー