지연 로딩이란 무엇입니까? 미니 프로그램에서 이미지 지연 로딩을 구현하는 두 가지 방법

<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입니다. 이 글에서는 간단한 사용법만 설명합니다. 자세한 내용을 보려면 클릭하세요.<p></p>애플릿에 정의된 내용은 노드 레이아웃 교차 상태 API를 사용하여 두 가지를 모니터링할 수 있다는 것입니다. 또는 레이아웃 위치에서 여러 구성요소 노드의 교차 상태. 이 API 세트는 사용자가 특정 노드를 볼 수 있는지 여부와 사용자가 볼 수 있는 비율을 추론하는 데 종종 사용될 수 있습니다. <p></p>디자인에는 5가지 주요 개념이 있습니다. <p></p>참조 노드: 특정 참조 노드의 레이아웃 영역이 참조 영역으로 사용될 수 있습니다. 레이아웃 영역의 교차점이 사용됩니다<p></p> 대상 노드: 모니터링 대상은 하나의 노드만 가능합니다.<p></p>교차 영역: 대상 노드와 참조 노드 사이의 교차 영역<p></p>교차 비율: 대상 노드 사이의 교차 비율 및 참조 노드<p></p>임계값: 여러 개가 있을 수 있으며 기본값은 [0]이며 [0.2, 0.5]와 같은 교차 비율로 이해할 수 있습니다.<p></p>다음과 같이 5개의 API가 있습니다<p></p>1. createIntersectionObserver([this], [options]), 이름을 알고 IntersectionObserver 예제 <p></p>2를 만듭니다. IntersectionObserver.relativeTo(selector, [margins])는 노드를 참조 영역으로 지정합니다. 위쪽, 왼쪽, 아래쪽 및 오른쪽을 포함할 수 있는 참조 영역 3. IntersectionObserver.relativeToViewport([ margin]), 페이지 표시 영역을 참조 영역으로 지정합니다<p></p>4.crossObserver.observer(targetSelector, 콜백). 지정된 수신 노드와 콜백 함수입니다. 이 함수는 대상 요소의 교차 상태가 변경될 때 실행됩니다. 콜백 함수에는 결과가 포함되어 있습니다. IntersectionObserver.disconnect()는 모니터링을 중지합니다. 콜백 함수는 더 이상 실행되지 않습니다<p></p>그럼 콜백 함수의 결과에 대해 이야기해 보겠습니다. 여기에 포함된 필드는<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
       })
     })
}