Я создаю экран загрузки для веб-сайта, который я делаю. Веб-сайт загружает много изображений, скриптов и т.д. Часть HTML и CSS отлично, но мне нужен способ гарантировать, что изображение "загрузка..." будет загружено раньше всего.
Я использую jQuery, и все начато в $(function () { ... });. Я предполагаю, что код для этого нужно будет вызывать перед/вне этого блока, а код для удаления экрана загрузки будет вызываться в самом конце этого блока. В настоящее время загрузочное изображение задается как фон DIV, который я предпочитаю. Однако, если это полностью необходимо, я соглашусь на тег IMG.
Обновление: (решение)
Я смог ответить на свой вопрос, используя комбинацию ответов Робин и Влад. Оба были очень хорошими и отличными ответами, однако проблема в том, что они были нацелены на загрузку изображения перед другим изображением, а не на загрузку изображения раньше всего. (CSS, JS и т.д.)
Вот грязная версия того, что я придумал:
var files = [new Image(), document.createElement('link'), document.createElement('script')];
files[0].setAttribute('src', 'images/loading.gif');
files[1].setAttribute('rel', 'stylesheet');
files[1].setAttribute('type', 'text/css');
files[1].setAttribute('href', 'test.css');
files[2].setAttribute('type', 'text/javascript');
files[2].setAttribute('src', 'js/jquery-1.5.1.min.js');
window.onload = function (e) {
document.getElementsByTagName('head')[0].appendChild(files[1]);
document.getElementsByTagName('head')[0].appendChild(files[2]);
}
Взглянув на последовательность загрузки на вкладке "Сеть" консоли разработчика Chrome, сначала загрузится "loading.gif", затем 4 фиктивных изображения, затем "test.css", а затем "jquery.1.5.1. min.js. Файлы CSS и JS не загружаются, пока они не будут вставлены в главный тег. Это именно то, что я хочу.
Я предсказываю, что у меня могут возникнуть некоторые проблемы, однако, когда я начну загружать список файлов. Chrome сообщает, что сначала загружается файл JS, но в большинстве случаев загружается файл CSS. Это не проблема, только когда я начинаю добавлять файлы для загрузки, мне нужно будет убедиться, что jQuery загружен перед файлом script, который использует jQuery.
Если у кого-то есть решение для этого или способ обнаружить, когда файлы CSS/JS закончены, используйте этот метод, пожалуйста, прокомментируйте. Хотя, я не уверен, что это будет проблемой. Возможно, мне придется задать новый вопрос в будущем, если я начну сталкиваться с проблемами.
Спасибо всем, кто помог с этой проблемой.
Обновление: (исправление с ошибкой)
У меня возникло много проблем с этим методом, потому что файлы script загружались асинхронно. Если бы я очистил кеш браузера, а затем загрузил страницу, он сначала завершил загрузку файлов, зависящих от jquery. Тогда, если я обновил страницу, это сработает, потому что jquery был загружен из кеша. Я решил это, установив массив загружаемых файлов, а затем добавив нагрузку script в функцию. Затем я перехожу через каждый элемент массива, используя этот код:
element.onload = function() {
++i; _step();
}
element.onreadystatechange = function() {
if (("loaded" === element.readyState || "complete" === element.readyState)) { ++i; _step(); }
}
