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

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

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

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>次に、コールバック関数の結果について説明します。それに含まれるフィールドは次のとおりです。

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组件是可见的') 
    }
})

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
       })
     })
}