Implémenter l'effet de chargement paresseux des images dans les mini-programmes WeChat

Pour obtenir l'effet de chargement paresseux des images dans les mini-programmes WeChat, des exemples de code spécifiques sont nécessaires

Avec le développement rapide de l'Internet mobile, les mini-programmes WeChat sont devenus un élément indispensable de la vie des gens. Lors du développement de mini-programmes WeChat, le chargement paresseux des images est une exigence courante, ce qui peut améliorer efficacement la vitesse de chargement et l'expérience utilisateur du mini-programme. Cet article expliquera comment implémenter le chargement paresseux d'images dans les mini-programmes WeChat et donnera des exemples de code spécifiques.

Qu'est-ce que le chargement paresseux des images ?

Le chargement paresseux d'image fait référence au retardement du chargement des images sur la page et ne commence à se charger que lorsque l'image entre dans la plage visible de l'utilisateur, réduisant ainsi le temps de chargement initial et le nombre de requêtes réseau. Dans l'applet WeChat, l'effet de chargement paresseux des images peut être obtenu en écoutant les événements de défilement de page et en utilisant l'API IntersectionObserver.

Exemple de code :

Tout d'abord, dans le fichier .wxml, nous devons définir toutes les images qui doivent être chargées paresseusement comme images d'espace réservé par défaut, comme indiqué ci-dessous :

<view class="container">
  <image class="img" src="/images/placeholder.png"/>
  <image class="img" src="/images/placeholder.png"/>
  <image class="img" src="/images/placeholder.png"/>
  ...
</view>

Ensuite, dans le fichier .wxss correspondant, définissez le style de l'image d'espace réservé et le style de l'image qui doit être chargée paresseusement, comme indiqué ci-dessous :

.container {
  display: flex;
  flex-direction: column;
}

.img {
  width: 100%;
  height: 200rpx;
  margin-bottom: 20rpx;
  background-color: #eee;
}

Ensuite, dans le fichier .js correspondant, nous devons écouter l'événement de défilement de page et utiliser l'API Intersection Observer pour déterminer si l'image est devenue visible Range, comme indiqué ci-dessous :

Page({
  data: {
    lazyLoadImgs: [
      "/images/img1.png",
      "/images/img2.png",
      "/images/img3.png",
      ...
    ]
  },
  onReady: function() {
    // 创建IntersectionObserver实例
    this.IntersectionObserver = wx.createIntersectionObserver(this);
    
    // 监听需要懒加载的图片
    this.IntersectionObserver.relativeToViewport().observe('.img', (res) => {
      if (res.intersectionRatio > 0) {
        // 图片进入了可见范围，开始加载图片
        const index = res.dataset.index;
        const lazyLoadImgs = this.data.lazyLoadImgs;
        lazyLoadImgs[index] = res.dataset.src;
        this.setData({
          lazyLoadImgs: lazyLoadImgs
        });
      }
    });
  },
  onUnload: function() {
    // 组件销毁时，停止监听
    this.IntersectionObserver.disconnect();
  }
})

Enfin, dans le fichier .wxml, nous devons lier dynamiquement l'attribut src de l'image, comme indiqué ci-dessous :

<view class="container">
  <image class="img" src="{{lazyLoadImgs[0]}}"/>
  <image class="img" src="{{lazyLoadImgs[1]}}"/>
  <image class="img" src="{{lazyLoadImgs[2]}}"/>
  ...
</view>

Grâce à l'exemple de code ci-dessus, nous peut implémenter le chargement paresseux des images dans l'applet WeChat Effect. Lorsque la page défile jusqu'à ce que l'image devienne visible, l'image se chargera automatiquement. Cela peut non seulement améliorer la vitesse de chargement des mini-programmes, mais également économiser du trafic et réduire la pression du serveur, offrant ainsi aux utilisateurs une meilleure expérience.

Résumé :

Le chargement paresseux des images est l'une des techniques couramment utilisées dans le développement de mini-programmes WeChat. En écoutant les événements de défilement de page et en utilisant l'API IntersectionObserver, nous pouvons facilement implémenter le chargement paresseux des images. Dans le développement réel, le chargement paresseux des images peut être optimisé et étendu en fonction de besoins spécifiques, améliorant ainsi encore les performances et l'expérience utilisateur du mini-programme.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!