Le préchargement de l'ensemble des actifs

Est-il un seul moyen universel pour charger tous les biens avant de les utiliser? Je suis désireux de charger des images, des fichiers audio, et quelques .swf fichiers avant de mon application démarre. Actuellement, je charge les images en créant de nouveaux <img> éléments et le réglage de la src le chemin des images, des fichiers audio-je ajouter de la preload="auto" attribut dans la <audio> tag et j'ai effectuer une ajax demande le chargement de la .swfs.

Est-il un problème de (re certains navigateurs en cache pas, etc.) avec la façon dont je suis actuellement le chargement de mes fichiers et s'il y a des "meilleures pratiques" de manière collective préchargement tous ces types de fichiers avant de m'afficher mon contenu?

  • Avez-vous des exigences du navigateur?
  • Rien de particulier, pas de. Une solution avec la plus grande portée en termes de prise en charge des navigateurs/versions serait préférable; une base de chrome + FF + des versions plus récentes d'internet explorer est ok.
  • La question est taggés avec javascript, jquery et html5 est encore à seulement répondu avec html5. Suggérer d'édition de la question de supprimer le javascript et jquery ainsi que la réponse complète à la question. Parce que l'atm, la réponse n'a rien javascript en elle, et pourtant, je suis arrivé ici en cherchant sur google javascript code for preloading assets au Sérieux :|.
InformationsquelleAutor alh | 2013-12-24
  1. 38

    Oui. En fait, cela a été fait en standard. Voici la RFC. Un déménagement à standardiser ce pour HTML5 est dans les œuvres

    Plus moderne des navigateurs prennent en charge cette fonctionnalité. Voici un bref résumé de la façon dont ils sont utilisés:

    Firefox

    Comme par MDN, vous pouvez utiliser le <link> des balises d'en-tête du document,

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

    ainsi que de définir HTTP Link - tête avec la demande, ou dans le code HTML comme une meta tag.

    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, comme ce sera la prochaine page, etc.

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

    IE 11

    Dans Internet Explorer aussi, il y a la Prefetch en-tête. Vous pouvez définir de la sorte:

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

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

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

    Ou, pré-rendu d'une page web (à la recherche Instantanée Google)

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

    Chrome

    Chrome aussi fait la même choses que Firefox et IE dans ce sujet.

    Safari

    Je n'ai pas été en mesure de trouver des preuves solides de savoir si Safari prend en charge ces choses. Mais la lecture sur de nombreuses sources, je soupçonne qu'ils font, juste que, probablement, Apple n'est pas si désireux de marché de Safari que Microsoft pousse IE11 (juste un avis).

    Avoir du plaisir. 🙂

    Sources:

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

    Comment puis-je précontrainte d'une page à l'aide de HTML5?

    • en fait, j'ai trié la IE et Firefox sections, qui est de rendre les choses sorte de confusion... je vais le corriger.
    • +1. Une grande réponse, merci pour les liens réels des normes.
    • La question est taggés avec javascript, jquery et html5 est encore à seulement répondu avec html5. Suggérer d'édition de la question de supprimer le javascript et jquery ainsi que la réponse complète à la question. Parce que l'atm, la réponse n'a rien javascript en elle, et pourtant, je suis arrivé ici en cherchant sur google javascript code for preloading assets au Sérieux :|.
    • regardez ci-dessous pour un javascript/jquery réponse. Il y a plusieurs façons d'atteindre les objectifs.
    • De vérifier la précontrainte de soutenir cet extrait de code pourrait aider: gist.github.com/yoavweiss/8490dabb3e0aa112fc74
    InformationsquelleAutor kumarharsh
  2. 24

    Prealoding actifs, est l'un des plus difficiles comme la plus simple des tâches dans un FLASH ou HTML5 projet parce que nous avons fait FLASH à HTML5 projets de conversion.

    Les plus faciles types de précharge sont précharge statique utilisé pour charger le film dans lequel ils existent. Pour ces précharge, tout ce que vous devez faire est d'arrêter le film sur un préchargement de l'écran, généralement la première image du film, et l'y maintenir jusqu'à ce que vous êtes en mesure de déterminer que le film a été entièrement chargé dans le lecteur Flash.

    Le Preloader arrête tout de scintillement ou de retard lors de la modification en mémoire cache des images sur une page web depuis la même image doit être téléchargés à partir du serveur à chaque fois qu'il est nécessaire pour être affiché.

    Nous avons utilisé jQuery HTML5 Chargeur dans notre web apps(HTML5), vous pouvez voir l' Dépôt Github ici.

    Ce plugin a besoin d'un fichier JSON pour obtenir les fichiers qu'il a de précontrainte, et il peut précharger les images, audio et vidéo html5 sources, le script et les fichiers de texte. En plus de cela, il a un autre type de chargeurs (circulaire,ligne, grand comptoir,etc) et des fonctionnalités supplémentaires ainsi de suite.

    Il est mis en œuvre comme cela. 

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

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

    Remarque: Nous avons utilisé pour notre HTML5 applications web qui s'exécute dans différentes plates-formes, y compris android et iOS.

    • projet intéressant en effet!
    InformationsquelleAutor Tony Jose
  3. 2

    Vous pouvez utiliser un PreloadJS de la bibliothèque (c'est une partie de CreateJS suite). Il est léger, facile à utiliser et très puissant en termes de configuration. Il permet la mise en queue, les connexions multiples, pause, etc. Il offre un accès à du progrès, complet, etc) des événements.

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

    InformationsquelleAutor strah
  4. 1

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

    J'ai essayé cela et de travailler pour moi. cette. Depuis c'est une plaine de l'api javascript, vous pouvez également l'utiliser comme window.onload=function(){/* JavaScriptCode */}; je crois.

    • Il est connu que la charge ne charge toujours toutes les images de la croix-navigateur.
    InformationsquelleAutor Siva Tumma
  5. 0

    J'ai été vraiment heureux avec PxLoader: http://thinkpixellab.com/pxloader/

    Il est extrêmement facile à utiliser, léger preloader pour une utilisation dans les applications HTML5. Vous pouvez télécharger des images, de l'audio, ou tout autre type de fichier. Il vous permet de surveiller les événements terminés ainsi.

    Il est libre d'utilisation (licence MIT) et forkable sur GitHub.

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

    InformationsquelleAutor Bangkokian