Загружать определенное изображение перед чем-либо еще

Я создаю экран загрузки для веб-сайта, который я делаю. Веб-сайт загружает много изображений, скриптов и т.д. Часть 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(); }
}

Ответы

var totalImages = 0;
var loadCounter = 0;

function incrementLoadCounter() {
   loadCounter++;
   if(loadCounter === totalImages) {
      $(document).trigger('everythingLoaded');
   }
}

function hideLoadingScreen() {
   $('#loadingScreen').hide();
   $('#divWithImages').show();
}

$(document).ready(function(e) {
    $('#loadingScreen').bind('everythingLoaded', function(e) {
        hideLoadingScreen();
    });
    var imagesToLoad = $('img.toLoad');
    totalImages = imagesToLoad.length;

    $.each(imagesToLoad, function(i, item) {
        $(item).load(function(e) {
           incrementLoadCounter();
        })
    });
})

<script type="text/javascript">
    if(document.images)
        (new Image()).src="http://www.image.com/example.png";
</script>

<link rel="preload" href="link-to-image" as="image"> 

<link rel="preload" href="link-to-image">

<img src="link-to-image" alt="">