Le chargement paresseux d'Uniapp ne prend pas effet

Avec le développement et la popularité de l'Internet mobile, de plus en plus de personnes choisissent d'utiliser uniapp pour le développement mobile. Dans le développement d'uniapp, le chargement paresseux est une technologie très importante, qui peut nous aider à optimiser la vitesse de chargement des pages et à améliorer l'expérience utilisateur. Cependant, nous constatons parfois que le chargement différé ne prend pas effet. Cet article abordera ce problème.

1. Qu'est-ce que le chargement paresseux d'Uniapp ?

Le chargement paresseux est une stratégie d'optimisation qui charge dynamiquement des images ou d'autres ressources multimédias lorsque la page défile. Il n'est chargé que lorsque ces ressources entrent dans la plage visible, réduisant ainsi le besoin de chargement initial. quantité de ressources chargées pour accélérer le chargement des pages. Dans uniapp, nous pouvons implémenter le chargement différé en définissant l'attribut lazy-load ou en utilisant l'interface uni.loadImage.

2. Pourquoi le chargement paresseux d'Uniapp échoue-t-il ?

Si vous utilisez le chargement paresseux dans uniapp mais que cela ne prend pas effet, voici quelques raisons possibles :

1 La hauteur de l'élément conteneur n'est pas définie#🎜🎜. ##🎜 🎜#Lors de l'utilisation du chargement paresseux dans un élément conteneur (tel qu'un div), l'élément conteneur doit avoir une hauteur fixe, sinon le navigateur ne peut pas déterminer si l'objet se trouve dans la zone visible. Par conséquent, si l’élément conteneur ne définit pas de hauteur, le chargement paresseux échouera.

Par exemple, le code suivant :

<div style="height:1000px;">
  <img src="/static/img.jpg" lazy-load />
</div>

Dans cet exemple, l'élément conteneur div a une hauteur fixe, mais l'élément image n'a ni largeur ni hauteur. Il convient de noter que lorsque l'élément conteneur est chargé dynamiquement, la hauteur doit être recalculée après le chargement des données du conteneur.

2. Définir la portée d'observation d'IntersectionObserver

IntersectionObserver est une nouvelle API qui peut implémenter le chargement paresseux des éléments, mais elle a une portée d'observation (racine si nous le précisons). la plage d'observation lors de la définition d'IntersectionObserver, donc le chargement paresseux échouera.

Par exemple, le code suivant :

<view>
  <image src="/static/img.jpg" root="{{root}}" lazy-load />
</view>

<script>
export default {
  data () {
    return {
      root: '#my-root'
    }
  },
  mounted () {
    const observer = uni.createIntersectionObserver().relativeToViewport({
      bottom: 50
    })
    observer.observe('.lazy-load', () => {
      console.log('image lazy load')
    })
  }
}
</script>

Dans cet exemple, nous précisons la plage d'observation en définissant le paramètre racine d'IntersectionObserver, donc lorsque l'élément observé entre dans la zone visible Quand, la fonction de rappel de lazy-load sera exécutée. Si le paramètre racine n'est pas défini, la fenêtre sera la portée d'observation par défaut.

3. L'image a été mise en cache

Lorsque l'image est mise en cache par le navigateur, qu'elle se trouve ou non dans la zone visible, la ressource image ne sera plus demandée , car Le navigateur récupérera les ressources d'image directement depuis le cache. Donc, dans ce cas, le chargement différé échouera également.

3. Comment résoudre le problème d'échec du chargement paresseux d'uniapp ?

1. Utilisez l'interface uni.loadImage

uni.loadImage est l'interface de chargement d'image fournie par uniapp, qui peut implémenter le chargement paresseux. Sa particularité est qu'il peut charger dynamiquement des images en cas de besoin sans avoir à charger toutes les images. L'utilisation de cette interface peut résoudre de nombreux problèmes d'échec de LazyLoad. Concernant l'utilisation d'uni.loadImage, il y a une introduction détaillée dans la documentation officielle, je n'entrerai donc pas dans les détails ici.

2. Utilisez IntersectionObserver

Si vous souhaitez utiliser IntersectionObserver pour implémenter le chargement paresseux d'éléments, vous pouvez envisager de définir l'élément racine (root) sur vide ou sur fenêtre. De cette façon, le chargement paresseux n’échouera pas en raison de problèmes de plage d’observation.

Par exemple, le code suivant :

<view>
  <image src="/static/img.jpg" lazy-load />
</view>

<script>
export default {
  mounted () {
    const observer = uni.createIntersectionObserver().relativeToViewport({
      bottom: 50
    })
    observer.observe('.lazy-load', () => {
      console.log('image lazy load')
    })
  }
}
</script>

Dans cet exemple, nous n'avons pas spécifié la plage d'observation (racine), donc sa plage d'observation est par défaut la fenêtre d'affichage, donc vous peut être chargé avec succès.

3. Définissez la largeur, la hauteur et la hauteur de l'image

Lorsque la largeur, la hauteur et la hauteur de l'image sont définies correctement, l'effet du chargement paresseux sera meilleur . Étant donné que le navigateur peut déterminer la taille de l’image, il peut mieux déterminer si l’image se trouve dans la zone visible. Par conséquent, lorsque vous utilisez le chargement différé, vous devez définir la largeur et la hauteur de l'image en même temps.

Par exemple, le code suivant :

<view>
  <image src="/static/img.jpg" style="width:100%;height:300px;" lazy-load />
</view>

Dans cet exemple, nous définissons la largeur et la hauteur de l'élément d'image afin que le navigateur puisse déterminer plus précisément s'il est dans dans la zone visible.

Résumé :

Le chargement paresseux est une technologie essentielle dans le développement mobile, qui peut améliorer la vitesse de chargement des pages et l'expérience utilisateur. Il existe de nombreuses façons d'implémenter le chargement différé dans uniapp, mais parfois le chargement différé échoue. Cet article présente trois raisons possibles de l'échec de LazyLoad et comment résoudre ces problèmes. J'espère qu'il pourra aider tout le monde à mieux utiliser la technologie de chargement paresseux.

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!