Pour réduire la perception de lenteur de ma présentation HTML, je souhaite précharger la diapositive suivante. Quelle est une bonne façon de faire cela?

Pendant qu'ils regardent la première diapositive, je voudrais charger le second en arrière-plan et simplement le «glisser» dans la vue lorsque l'utilisateur le demande. Sinon, ils doivent regarder une barre de chargement ou un fileur qui reçoit toujours des plaintes. Comment cela peut-il être fait correctement?Pour réduire la perception de lenteur de ma présentation HTML, je souhaite précharger la diapositive suivante. Quelle est une bonne façon de faire cela?

De même, est-ce que je pourrais garder toutes les diapositives 'quelque part' afin qu'elles puissent revenir aussi facilement ou aurais-je besoin de couper et de 'détruire' certaines d'entre elles pour empêcher le navigateur de en retard? Je ne suis pas sûr de savoir comment cela fonctionne ou quelles sont mes limites.

MISE À JOUR: Les diapositives sont simplement HTML mais la plupart contiennent de l'audio et quelques vidéos. Je suppose que la meilleure approche serait de re-demander l'audio et la vidéo pour une diapositive car elle gagne en focus mais le HTML et les images potentielles sont ce que je veux être déjà chargé quand ils naviguent en avant. Il pourrait y avoir 20 diapositives, il pourrait y avoir 200 diapositives. Je doute de quelque chose de plus grand dans la plupart des cas.

Nous n'avons pas besoin de sauvegarder toutes les diapos précédemment vues mais je veux au moins pouvoir pré-charger le prochain.

Source

2010-12-09 BigOmega

Combien de diapositives y a-t-il et quel type de données contiennent-elles? –

Par exemple, sont-ils des images ou quoi? Vous devrez fournir beaucoup plus d'informations. –

@Pekka @ T.J. Crowder (voir mise à jour) – BigOmega

Je me rabattrais sur AJAX pour ce type de projet, en supposant que vos diapositives soient riches en contenu. Une fois que vous affichez une diapositive, il n'y a aucune raison que je vois que vous ne pouvez pas charger de façon asynchrone le code HTML pour la diapositive suivante dans un <div>...</div> caché et simplement montrer que <div>...</div> lorsque vous êtes prêt et récupérez la 3ème diapositive.

Check out jQuery's .ajax() function si vous n'êtes pas déjà familier avec elle

Cela devrait obtenir vos images et texte chargé, et vous pouvez alors déclencher le chargement de l'audio/vidéo au bon moment.

Source

2010-12-09 15:06:20 Dutchie432

Merci, pensez-vous que le navigateur souffrirait si je laissais toutes les diapositives chargées disponibles dans divs une fois qu'ils sont chargés? Je veux dire que le navigateur serait à la traîne une fois que je frappe comme 50 divs par exemple? – BigOmega

Cela dépendrait certainement de la quantité de contenu. Je ferais un essai et si vous souffrez de n'importe quel type de latence, vous pouvez garder seulement 3 diapositives "à la main" à la fois. La diapositive que vous regardez, et la diapositive avant et après. Tout ce dont vous avez besoin est trois divs ("prev", "current" et "next"). Lorsque vous avancez les diapositives, définissez "prev" avec innerHTML de "current", définissez "current" sur innerHTML de "next" et remplissez "next" avec les données de votre ajax – Dutchie432

En pensant à cela plus loin, vous pouvez même créer un tableau avec 50 slots (ou autant de diapositives que vous avez) et vous pouvez pré-remplir le tableau avec le code HTML pour chaque diapositive .. Il aura lieu dans les coulisses avec ajax .. De cette façon, le HTML est sur appel tout le temps, et vous pouvez simplement utiliser ce code HTML pour remplir vos articles "prev", "current", et "next" 'div' – Dutchie432

Pour réduire la perception de lenteur de ma présentation HTML, je souhaite précharger la diapositive suivante. Quelle est une bonne façon de faire cela?

Répondre

Questions connexes