Qu'est-ce que le chargement paresseux ? Deux méthodes d'implémentation de chargement paresseux d'images dans des mini-programmes

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

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

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  À ce stade, nous avons terminé une petite version du programme de chargement paresseux des images, mais nous avons changé. notre réflexion. En fait, la mise en œuvre n’a pas changé. Apprenons quelque chose de nouveau. <p></p>Statut d'intersection de disposition des nœuds<h3></h3>Quel est le statut d'intersection de nœuds ? Il s'agit d'une nouvelle API appelée IntersectionObserver. Cet article explique uniquement l'utilisation simple, veuillez cliquer dessus <p></p>La définition donnée dans l'applet est que l'API d'état d'intersection de disposition des nœuds peut être. utilisé Surveiller l’état d’intersection de deux ou plusieurs nœuds de composants aux positions de disposition. Cet ensemble d'API peut souvent être utilisé pour déduire si certains nœuds peuvent être vus par les utilisateurs et quelle proportion peut être vue par les utilisateurs. Il existe cinq concepts de conception principaux dans <p></p>, à savoir <p></p> Nœud de référence : la zone de mise en page d'un nœud de référence est utilisée comme zone de référence. Il peut y avoir plusieurs nœuds de référence. plusieurs zones de référence, la zone de référence est sélectionnée. L'intersection de leurs zones de mise en page <p></p>Nœud cible : La cible de surveillance ne peut être qu'un seul nœud<p></p>Zone d'intersection : La zone d'intersection entre le nœud cible et le nœud de référence<p></p>Rapport d'intersection : Le rapport d'intersection entre le nœud cible et le nœud de référence <p></p> seuil : il peut y en avoir plusieurs, la valeur par défaut est [0], qui peut être compris comme le rapport d'intersection, tel que [0.2, 0.5]<p></p>L'API à ce sujet est Cinq, comme suit <p></p>1 createIntersectionObserver([this], [options]), comme son nom l'indique, create. une instance d'IntersectionObserver <p></p>2. intersectionObserver.relativeTo(selector, [margins] ), spécifiez le nœud comme zone de référence. Le paramètre margins peut agrandir ou réduire la zone de référence, qui peut inclure le haut, la gauche, le bas, et à droite. <p></p>3. intersectionObserver.relativeToViewport([margin]), spécifiez la zone d'affichage de la page comme zone de référence <p></p>4. intersectionObserver.observer(targetSelector, callback), les paramètres sont les nœud de surveillance spécifié et une fonction de rappel. Cette fonction sera déclenchée lorsque l'état d'intersection de l'élément cible change. La fonction de rappel contient un résultat, comme suit. Parlons-en à nouveau<p></p>5 intersectionObserver.disconnect(). arrête la surveillance et la fonction de rappel ne sera plus déclenchée<p></p>Parlons ensuite du résultat dans la fonction de rappel. Les champs qu'elle contient sont <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
       })
     })
}