télécharger des images dans un ordre spécifique

Je suis l'implémentation d'une fonctionnalité qui affiche une vue à 360 degrés d'un produit. La vue est représentée par une séquence d'images autonomes téléchargées depuis le serveur. Du point de vue de l'expérience utilisateur, certaines images de la séquence sont plus importantes que les autres. Ainsi, lorsque mon code télécharge des images, je voudrais d'abord aller chercher les plus importantes et les afficher immédiatement, puis aller chercher celles qui sont moins importantes. Je sais que je peux commander mes images par leur importance et les télécharger séquentiellement, l'une après l'autre, mais je voudrais profiter du téléchargement asynchrone pour réduire la bande passante aussi.télécharger des images dans un ordre spécifique

Quelqu'un peut-il recommander quelque chose ici?

Source

2012-06-25 akonsu

Vous pouvez charger les images les plus importantes dans une première vague, puis les autres comme celui-ci:

var firstImages = []; 
var otherImages = []; 

var count = firstImages.length; 

var onloadfirstwave = function() { 
    if (--count==0) { 
     // lauches second wave 
    } 
}; 
// and for each image, do 
firstImages[i].onload = onloadfirstwave; 
firstImages[i].src = "someurl";

serait lancé la deuxième vague seulement après les premières images sont chargées et le parallélisme de ces première charge serait préservé.

Source

2012-06-25 18:27:31

Pourquoi ne pas simplement utiliser setTimeout et avoir un délai légèrement augmenté (500ms) entre chaque image.

Source

2012-06-25 18:23:29

voulez-vous dire commencer par la première image, attendez un peu et passer à la suivante sans attendre la précédente à la fin? – akonsu

Un dépassement de délai n'est pas une garantie de l'ordre de chargement de l'image. Vous devez vous connecter à l'événement onload, puis charger l'image suivante. –

@Diodeus - En choisissant une valeur raisonnable pour le timeout, vous augmentez la probabilité, mais, quoi qu'il en soit, le premier devrait charger plus vite que les suivants, puisque, s'il y a 10 images, le dernier peut commencer 5 secondes plus tard. le premier. –

Le navigateur gère le chargement asynchrone et limite le nombre de téléchargements parallèles. Juste préchargez les images de la manière normale. Vous n'avez besoin de rien de spécial.

Source

2012-06-25 18:23:44

oui. J'essaie de m'assurer que mes images "importantes" sont téléchargées en premier. – akonsu

ils commenceront à télécharger dans l'ordre que vous leur attribuez. Si les images importantes sont plus grandes que les autres, elles peuvent finir plus tard, mais vous pouvez simplement masquer les images moins importantes jusque là. –

Le code HTML peut être créé en js ou en html. Version Html: ...

var images = ['img1.jpg','img2.jpg',...], 
    index = 0; 
function load_next_image(){ 
    if(index<images.length){ 
    // if you want to create the img from js 
    // this is the place to do so 
    $('#img'+index).attr('src',images[index]).onload(load_next_image); 
    index++; 
    }else{ 
    // all images loaded 
    } 
} 
load_next_image()

Source

2012-06-25 18:32:48 cuzzea

télécharger des images dans un ordre spécifique

Répondre

Questions connexes