Я создаю загрузочный экран для сайта, который я делаю. Веб-сайт загружает много изображений, сценариев и т. Д. Часть HTML и CSS великолепна, но мне нужен способ гарантировать, что изображение «loading ...» будет загружено раньше всего.

Я использую 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 не начинают загружаться, пока они не будут вставлены в тег head. Это именно то, что я хочу.

Я предсказываю, что у меня могут начаться некоторые проблемы, когда я начну загружать список файлов. Chrome сообщает, что иногда файл JS загружается первым, но большую часть времени файл CSS загружается первым. Это не проблема, за исключением тех случаев, когда я начинаю добавлять файлы для загрузки, мне нужно убедиться, что jQuery загружен перед файлом сценария, использующим jQuery.

Если у кого-то есть решение для этого или способ определить, когда файлы CSS / JS заканчивают загрузку, используя этот метод, пожалуйста, прокомментируйте. Хотя я не уверен, что это будет проблемой. Возможно, мне придется задать новый вопрос в будущем об этом, если я начну сталкиваться с проблемами.

Спасибо всем, кто помог с этим вопросом.

Обновление: (исправление ошибки)

Я столкнулся с большой проблемой этого метода, потому что файлы сценариев загружались асинхронно. Если бы я очистил кеш браузера, а затем загрузил страницу, он сначала закончил бы загрузку файлов, зависящих от jquery. Затем, если я обновлю страницу, она будет работать, потому что jquery был загружен из кеша. Я решил это, настроив массив файлов для загрузки, а затем поместив скрипт загрузки в функцию. Затем я бы прошел через каждый элемент массива, используя этот код:

element.onload = function() { 
    ++i; _step();
}
element.onreadystatechange = function() { 
    if (("loaded" === element.readyState || "complete" === element.readyState)) { ++i; _step(); }
}