web-dev-qa-db-fra.com

Préchargement de tous les actifs

Existe-t-il un moyen universel unique de charger tous les actifs avant de les utiliser? Je souhaite charger des images, des fichiers audio et quelques fichiers .swf avant le démarrage de mon application. Actuellement, je charge les images en créant de nouveaux éléments <img> et en définissant la variable src sur le chemin de l'image. Pour les fichiers audio, j'ajoute l'attribut preload="auto" dans la balise <audio> et j'exécute une demande ajax pour charger le .swfs.

Existe-t-il un problème (certains navigateurs ne mettent pas en cache, etc.) la manière dont je charge actuellement mes fichiers et existe-t-il une méthode de «meilleure pratique» pour précharger collectivement tous ces types de fichiers avant d'afficher mon contenu?

javascriptjqueryhtml5preload
26
alh

Oui. En fait, cela a été transformé en norme. Voici le _ RFC pertinent. Un mouvement pour normaliser cela pour HTML5 est in works

La plupart des navigateurs modernes prennent en charge le préchargement. Voici un bref résumé de leur utilisation:

Firefox

Selon MDN, vous pouvez utiliser les balises <link> en tête du document,

<link rel="prefetch" href="/assets/my-preloaded-image.png">

ainsi que définir l'en-tête HTTP Link avec la demande ou dans le code HTML en tant que balise meta.

Link: </assets/my-preloaded-image.png>; rel=prefetch
<meta http-equiv="Link" content="</assets/my-preloaded-image.png>; rel=prefetch">
enter code here

Non seulement cela, mais vous pouvez également donner des conseils de navigation dans la page, tels que ce qui sera la page suivante, etc.

<link rel="next" href="2.html">

IE 11

Dans Internet Explorer, il y a aussi l'en-tête Prefetch . Vous pouvez définir comme suit:

<link rel="prefetch" href="http://example.com/style.css" />

Vous pouvez même pré-extraire (pré-résoudre) les requêtes DNS

<link rel="dns-prefetch" href="http://example.com/"/>

Ou, prérender une page Web (à la Google Instant)

<link rel="prerender" href="http://example.com/nextpage.html" />

Chrome

Chrome fait également la même chose que Firefox et IE dans cet aspect .

Safari

Je n'ai pas pu trouver de preuve solide de la compatibilité de Safari avec ces choses. Mais je suppose qu’ils en ont lu beaucoup, mais il est probable que Apple n’est pas aussi enthousiaste à l'idée de commercialiser Safari que Microsoft préconise IE11 (juste un avis).

S'amuser. :)

Sources:

Mise à jour: Après avoir compilé cette réponse, je suis tombé sur une réponse similaire sur SO, qui donne plus de détails sur le sujet. S'il vous plaît jeter un oeil.

Comment précharger une page en utilisant HTML5?

37
kumar_harsh

La pré-configuration des ressources est l’une des tâches les plus difficiles et les plus simples d’un projet FLASH ou HTML5, car nous avons réalisé des projets de conversion FLASH en HTML5.

Les types de précharge les plus faciles sont les préchargeurs statiques utilisés pour charger le film dans lequel ils existent. Pour ces préchargeurs, il vous suffit d'arrêter le film sur un écran de préchargement, généralement la première image du film, et de le conserver jusqu'à ce que vous soyez en mesure de déterminer que le film a été complètement chargé dans le lecteur Flash.

Le préchargeur arrête également tout scintillement ou tout retard lors de la modification des images non mises en cache sur une page Web, car la même image doit être téléchargée à partir du serveur à chaque fois que celle-ci doit être affichée.

Nous avons utilisé jQuery HMTL5 Loader dans nos applications Web (HTML5), vous pouvez voir le Github Repo ici.

Ce plugin a besoin d’un fichier JSON pour récupérer les fichiers qu’il doit précharger, et il peut précharger des images, des sources vidéo et audio HTML 5, des fichiers de script et des fichiers texte. En plus de cela, il a un type différent de chargeurs (circulaire, ligne, grand compteur, etc.) et des fonctionnalités supplémentaires, etc.

C'est implémenté comme ça. 

<script>
        var loaderAnimation = $("#html5Loader").LoaderAnimation();
        $.html5Loader({getFilesToLoadJSON:'json file',
            onUpdate: loaderAnimation.update,
            debugMode:false
        });
    </script>

Cela fonctionne parfaitement dans différents navigateurs, y compris Chrome, FireFox, Safari, Opera, etc. et dans les navigateurs mobiles.

Remarque: nous l'avons utilisé pour nos applications Web HTML5 qui s'exécutent sur différentes plates-formes, notamment Android et iOS.

24
Tony Jose

Essayez d'utiliser $(window).load(function(){ /* Use any of your resources */ });.

J'ai essayé cela et travaillant pour moi. ce . Puisqu'il s'agit d'une API javascript simple, vous pouvez également utiliser comme window.onload=function(){/* JavaScriptCode */}; je crois. 

1
Siva Tumma

Vous pouvez utiliser une bibliothèque PreloadJS (elle fait partie de la suite CreateJS). Il est léger, facile à utiliser et assez puissant en termes de configuration. Il permet la mise en file d'attente, les connexions multiples, la pause, etc. Il offre un accès aux événements (progression, finalisation, etc.).

Si vous avez de l'expérience en Actionscript, cet outil devrait être assez simple pour vous.

1
strah

Je suis vraiment heureux avec PxLoader: http://thinkpixellab.com/pxloader/

Il s'agit d'un préchargeur extrêmement facile à utiliser et léger à utiliser dans les applications HTML5. Vous pouvez télécharger des images, de l'audio ou tout autre type de fichier. Il vous permet également de surveiller les événements terminés.

C'est gratuit d'utiliser (licence MIT) et forkable sur GitHub. 

Il y a quelques bonnes démos et exemples de scripts ici: http://thinkpixellab.com/pxloader/#sample1

0
Bangkokian