comment précharger plus d'un, mais pas toutes les images d'un diaporama avec jquery

Question

Je voudrais créer un lecteur vidéo en ligne à base de stop motion. Fondamentalement, un diaporama qui montre 2-4 images par seconde. Chaque image peut avoir un maximum de 20 Ko. Je ne veux pas précharger toutes les images dans le diaporama car il y en a peut-être des milliers, mais je dois précharger plus que la prochaine image du spectacle car cela ne sera pas assez rapide (à cause de la vitesse de lecture du navigateur chargement de plus d'une image à la fois).

Je cherchais à utiliser le plugin jQuery Cycle (http://malsup.com/jquery/cycle/) avec une fonction de type addSlide mais je ne sais pas comment le faire fonctionner.

Une chose comme ceci pourrait fonctionner? -Slideshow commence -l'image est lue -preloader va tenter de charger les 60 prochaines images -playback attendra la prochaine image en ligne pour charger complètement, mais n'attendra pas tous les 59 autres.

L'ordre de lecture/préchargement est important pour cette application.

Answer 1

• Vous pouvez créer une fonction qui pré-charge N images, lorsque N images sont chargées, elle s'appelle à nouveau, Combien coûte N? peut être 5 ou 10 ou vous pouvez trouver une formule pour calculer N en fonction des dimensions attendues des Images/Taille et durée de l'affichage
• Si toutes les tailles d'images sont presque les mêmes, la première image à charger devrait être chargée en premier, Donc, il n'attendrait pas tous les 59 autres.
• plus une variable 'loadedN' qui contient l'index de la dernière image chargée
• FireBug est certainement nécessaire pour déboguer cette application.
• fonction de lecture doit vérifier si l'indice d'image demandée est chargée ou non

Answer 2

je pouvais imaginer que cela doit être multitraitement. Ce que je pense à est divisé la logique de lecture de la logique de préchargement de l'image. Cela fonctionne comme ceci ...

Vous démarrez un initialiseur. Une fois que N images sont préchargées (vous pouvez afficher l'écran redouté "buffering" à ce stade), vous appelez 2 fonctions.

Fonction 1 - affiche une image, puis démarre une minuterie après laquelle elle est à nouveau appelée pour afficher l'image suivante. Avec 4 images par seconde, il s'appellerait toutes les 250ms.

Fonction 2 - démarre une minuterie. Ici vous pouvez travailler avec des "valeurs attendues". Vous pouvez vous attendre à ce que, par exemple, 60 images soient traitées après 15 secondes. Ainsi, après 7 secondes, vous commencez à charger les 30 ou 60 images suivantes et à les ajouter au tableau d'images, le tout pendant que l'autre fonction montre encore les images déjà présentes.

Bien sûr, vous avez besoin d'un limiteur sur la fonction 1, qui arrête la lecture à l'élément Nth-1 afin d'éviter les débordements de pile ou d'erreurs d'E/S.

Je ne sais pas si cela a été utile, mais c'est comme cela que j'ai compris la question.

Answer 3

Cela semble problématique car vous ne serez jamais capable de contrôler à quelle vitesse le client peut atteindre les images. Utiliser la vidéo serait probablement un résultat plus facile et plus satisfaisant.Pour que cela fonctionne dans js, vous devez construire un objet tampon qui peut mettre en pause et reprendre la lecture lorsque le nombre d'images préchargées tombe sous/sur un seuil minimal; comme des films flash.

Answer 4

Je n'ai pas le code exact d'une manière utilisable, mais je peux expliquer le cadre. J'ai fait quelque chose de très similaire dans jQuery - bien que je dirais que ce n'est pas tellement jQuery que Javascript. Voici les bases de ce que j'ai fait ...

Créer une fonction qui "précharge" une image. La façon de le faire en Javascript est simplement de créer un élément d'image, par exemple:

`function preloadAnImage(src) { 
    var i = new Image(1020, 492); 
    i.src = src; 
    }` 

Créer une liste d'images, par exemple. imagesToPreloadIndex = ['image1.jpg','image2.jpg'... ];

Créer une fonction qui fonctionne de cette file d'attente, par exemple:

function preloadNextImage() { 
    preloadAnImage(imagesToPreload.pop()); 
    if (imagesToPreloadIndex.length > 0) { 
     setTimeout(preloadNextImage, 300); 
    } 
    } 

Cela vous donne le cadre.

Vous voudrez que ceci soit synchronisé avec l'affichage réel des images. Cela fonctionne bien tant que tout va bien. Ensuite, vous devez décider quoi faire si vous êtes en retard dans votre chargement ... vous laissez tomber une image ou ralentissez votre diaporama? Je ne suis pas familier avec un plugin qui implémente cette stratégie, mais serait amusant à mettre en œuvre.