Предварительная загрузка всех активов

Существует ли универсальный способ загрузки всех активов перед их использованием? Я хочу загрузить некоторые изображения, аудиофайлы и несколько файлов .swf до запуска моего приложения. В настоящее время я загружаю изображения, создавая новые элементы <img> и устанавливая src в путь к изображению, для аудиофайлов я добавляю атрибут preload="auto" в теге <audio>, и я выполняю запрос ajax загрузите .swf s.

Есть ли какие-либо проблемы (например, некоторые браузеры не кэшируют и т.д.) с тем, как я загружаю файлы в настоящий момент, и существует ли способ "передовой практики" для совместной предварительной загрузки всех этих типов файлов до отображения моего содержимого?

Ответ 1

Да. Фактически, это было сделано в качестве стандарта. Вот соответствующий RFC. Переход к стандартизации для HTML5 в работе

Большинство современных браузеров поддерживают предварительную выборку. Вот краткий обзор того, как они используются:

Firefox

В соответствии с MDN вы можете использовать теги <link> в начале документа,

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

а также задать заголовок HTTP Link с запросом или внутри HTML как тег meta.

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

Не только это, но вы также можете указать подсказки навигации на странице, например, что будет следующей страницей и т.д.

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

IE 11

В Internet Explorer также есть заголовок Prefetch. Вы можете задать так:

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

Вы даже можете предварительно запрограммировать (предварительно разрешить) DNS-запросы

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

Или, предварительно запустите веб-страницу (a-la Google Instant)

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

Chrome

Chrome также выполняет те же действия, что и Firefox и IE, в в этом отношении.

Safari

Я не смог найти убедительное доказательство того, поддерживает ли Safari эти вещи. Но, читая многие источники, я подозреваю, что они это делают, просто, вероятно, Apple не очень хочет продавать Safari, поскольку Microsoft нажимает IE11 (просто мнение).

Получайте удовольствие.:)

Источники:

Обновление: после компиляции этого ответа я наткнулся на аналогичный ответ на SO, который дает более подробную информацию по этой теме. Пожалуйста, смотрите.

Как предварительно загрузить страницу с помощью HTML5?

Ответ 2

Предварительное кодирование активов - одна из самых сложных и простых задач в проекте FLASH или HTML5, потому что мы сделали FLASH-проекты конверсии HTML5.

Простейшими видами прелоадеров являются статические предварительные загрузчики, используемые для загрузки фильма, в котором они существуют. Для этих предварительных загрузчиков все, что вам нужно сделать, это остановить фильм на экране предварительного натяжения, как правило, в первом кадре фильма и сохранить его там, пока вы не сможете определить, что фильм полностью загружен в проигрыватель Flash.

Preloader также останавливает любое мерцание или задержку при изменении нераскрытых изображений на веб-странице, так как одно и то же изображение должно быть загружено с сервера каждый раз, когда это необходимо для отображения.

Мы использовали jQuery HMTL5 Loader в наших веб-приложениях (HTML5), вы можете увидеть Github Repo здесь.

Этот плагин нуждается в файле JSON для получения файлов, которые он должен предварительно загружать, и он может предварительно загружать изображения, html5 видео и аудио источники, script и текстовые файлы. В дополнение к этому у него есть разные типы погрузчиков (круговой, линейный, большой счетчик и т.д.) И дополнительные возможности.

Это реализовано так.

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

Он отлично работает в разных браузерах, включая Chrome, FireFox, Safari, Opera и т.д. и в мобильных браузерах.

Примечание. Мы использовали это для наших веб-приложений HTML5, которые работают на разных платформах, включая android и iOS.

Ответ 3

Вы можете использовать библиотеку PreloadJS (она входит в набор CreateJS). Он легкий, простой в использовании и довольно мощный с точки зрения конфигурации. Он позволяет проводить очередность, несколько подключений, приостанавливать и т.д. Он предлагает доступ к событиям (прогресс, завершение и т.д.).

Если у вас есть опыт работы с ActionScript, этот инструмент должен быть достаточно прямым для вас.

Ответ 4

Попробуйте использовать $(window).load(function(){ /* Use any of your resources */ });.

Я попробовал это и работал на меня. this. Поскольку это простой javascript api, вы также можете использовать как window.onload=function(){/* JavaScriptCode */};, я считаю.

Ответ 5

Я был очень доволен PxLoader: http://thinkpixellab.com/pxloader/

Это чрезвычайно простой в использовании, легкий предварительный загрузчик для использования в приложениях HTML5. Вы можете загружать изображения, аудио или любой другой тип файла. Он также позволяет отслеживать завершенные события.

Он бесплатный для использования (лицензия MIT) и forkable на GitHub.

Здесь есть несколько хороших демонстраций и script образцов: http://thinkpixellab.com/pxloader/#sample1