Chargement paresseux et plugin jquery fullpage

Question

J'utilise fullpage.js mais j'ai 20 images à afficher. Avec une connexion lente, cela prend beaucoup de temps à charger. Donc, je voudrais normalement charger les quatre premières images normalement et les autres images avec un système de chargement paresseux. J'ai vu dans les documents pour exécuter la fonction de chargement paresseux, nous devons ajouter data-src dans la balise img.

donc j'avais données src après les images FITH ...

<div class="slide slide0"> 
<img src="url-of-the-image.jpg"> 
</div> 
<div class="slide slide1"> 
<img src="url-of-the-image.jpg"> 
</div> 
<div class="slide slide2"> 
<img src="url-of-the-image.jpg"> 
</div> 
<div class="slide slide3"> 
<img src="url-of-the-image.jpg"> 
</div> 
<div class="slide slide4"> 
<img data-src="url-of-the-image.jpg"> 
</div> 
<div class="slide slide5"> 
<img data-src="url-of-the-image.jpg"> 
</div> 
<div class="slide slide6"> 
<img data-src="url-of-the-image.jpg"> 
</div> 

Mais le problème est que de la cinquième image de chaque image sont charge quand ils sont dans la fenêtre. Nous avons eu le temps de voir l'image à charger ...

Exemple de fonction de charge paresseuse: https://codepen.io/alvarotrigo/pen/eNLBXo

Avez-vous une idée de charger à partir de la cinquième image chaque image un par un avant d'être dans la fenêtre ?

Merci d'avance!

Answer 1

C'est le point de chargement paresseux, ne chargeant des images que lorsque l'utilisateur est sur le point de les voir. Dans ce cas, ils sont chargés sur le rappel onLeave lorsque nous savons que l'utilisateur va se retrouver dans cette section ou diapositive.

Si vous souhaitez simplement les charger au chargement de la page, n'ajoutez pas le data-src et chargez-les normalement.

Si, pour une raison étrange, vous voulez simplement retarder le chargement, vous pouvez toujours utiliser un setTimeout dans le rappel afterRender, mais je ne vois pas le point dessus.