jQuery Girl
  1. jQuery Girl
  3. Préchargement des images dans la galerie jQuery
Intereting Posts
Comment créer une application à plusieurs pages en utilisant react L’image se déplace en glissant Faire pivoter une image à l’aide de Javascript Valider le champ dynamic jquery Structure liquide avec liquide à gauche + colonne droite fixe Lier des événements à tous les champs de saisie de texte dans toutes les vues Backbone Recherche d’une position de cellule (ligne, colonne) dans des tableaux nesteds Évitez la fonction createElement si elle se trouve dans un élément (contentEditable) Ajout d’états actifs aux hyperliens lorsque l’utilisateur clique dessus Jquery et Ajax pour charger Dynamiquement IFrame sorting de la table css en fonction des différentes rubriques de la table Comment obtenir la liste de tous les atsortingbuts d’élément CSS avec jQuery? jquery dialog: faire glisser le dialog avec iframe inside Comment obtenir les valeurs des lignes de table sélectionnées à l’aide de jQuery? Puis-je obtenir tous les atsortingbuts commençant par «on» en utilisant jQuery?

Préchargement des images dans la galerie jQuery

J’aimerais utiliser cette galerie sur mon site web. Le seul problème est que lorsque vous cliquez à côté pour charger la photo, cela prend beaucoup de temps. Je voudrais précharger les deux images suivantes, lorsque l’utilisateur clique sur l’image pour l’agrandir.

Je suis tombé sur cette solution mais elle codait manuellement les noms d’images, mais mes images sont chargées dynamicment. Y a-t-il un autre moyen de le faire?

Voici une solution simple. Vous pouvez append un événement de clic aux vignettes de sorte que les trois images suivantes soient préchargées lorsque vous cliquez dessus. Une manière de précharger l’image suivante une fois que vous êtes dans la navigation d’image individuelle rest à déterminer, mais espérons que cela vous aidera à y arriver. 

$("#content img").on("click",function(){ // use .live instead if you are using an older version of jQuery var next = $(this).next(); for (var i = 0; i < 3; i++) { var img = new Image(); img.src = next.attr("alt"); next = next.next(); } });

Vous pouvez utiliser la solution que vous avez mentionnée, il vous suffit d’extraire l’atsortingbut src des images de la galerie: 

 preload($('#gallery-images img').map(function() { return this.src; }));

Cela appellera en réalité la fonction de préchargement avec le tableau requirejs.

Je recommande d’utiliser cette galerie – http://dimsemenov.com/plugins/royal-slider/gallery/. Elle fait exactement ce dont vous avez besoin – précharge les images à proximité et vous pouvez définir le préchargement. Mais notez que c’est commercial et coûte environ 10 dollars.

Si vos images sont stockées dans un mysql, vous pouvez utiliser la solution que vous avez trouvée avec quelques modifications en ajoutant un code JSON à partir de la requête SQL de noms d’images. Passage de l’information sur jQuery pour le préchargement 

  require_once('JSON.php'); $json = new Services_JSON(); $out = $json->encode($query)