charger une image spécifique avant toute autre chose

Je suis un créer un écran de chargement pour le site que j'ai fais. Le site se charge de nombreuses images, scripts, etc. Le HTML et le CSS de la partie est grande, mais j'ai besoin d'un moyen de garantir que le "chargement..." image sera chargée avant toute autre chose.

Je suis à l'aide de jQuery, et tout est engagée dans $(function () { ... });. J'imagine que le code devrait être appelée avant/en dehors de ce bloc, et le code pour supprimer l'écran de chargement sera appelée à la fin de ce bloc. Actuellement, le chargement de l'image est défini comme un DIV en arrière-plan, qui est la façon que je le préfère. Cependant, si c'est nécessaire, je me contenterai d'une balise IMG.

Mise à jour: (solution)

J'ai été en mesure de répondre à ma propre question en utilisant une combinaison de Robin et Vlad réponses. Les deux étaient très bonnes et excellentes réponses, cependant le problème est qu'elles visent à charger une image avant qu'une autre image, plutôt que de charger une image avant toute autre chose. (CSS, JS, etc...)

Voici la sale version de ce que je suis venu avec:

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]);
}

De prendre un coup d'oeil à la charge de la séquence sur l'onglet réseau de Chrome developer console montre que "les loading.gif" est chargé en premier, puis 4 mannequin d'images, puis de les " tester.css', puis 'jquery.1.5.1.min.js'. Le CSS et le JS fichiers ne commencent pas à la charge, jusqu'à ce qu'ils ont été insérés dans la balise head. C'est exactement ce que je veux.

Je prédit que je peut commencer à avoir des problèmes, cependant, quand je commence à charger une liste de fichiers. Chrome rapports que, parfois, le fichier JS est chargé en premier, mais la majorité du temps, le fichier CSS est chargé en premier. Ce n'est pas un problème, sauf que quand j'ai commencer à ajouter des fichiers à charger, je vais avoir besoin pour s'assurer que jQuery est chargé avant d'un fichier de script qui utilise jQuery.

Si quelqu'un a une solution pour cela, ou un moyen de détecter les fichiers CSS/JS la fin du chargement, à l'aide de cette méthode, alors s'il vous plaît commentaire. Cependant, je ne suis pas sûr que ça va être un problème encore. J'ai peut-être besoin de poser une nouvelle question à l'avenir, à ce sujet, si je commence à rencontrer des problèmes.

Merci à tous qui m'ont aidé avec ce problème.

Mise à jour: (bug fix)

J'ai terminé la course à pied dans un tas de problème avec cette méthode, car les fichiers de script ont été chargés de manière asynchrone. Si je voudrais effacer le cache du navigateur, puis de charger la page, ce serait la fin du chargement de mon jquery fichiers dépendants la première. Alors si j'ai rafraîchi la page, il travail, parce que jquery a été chargé à partir du cache. J'ai résolu ce problème par la mise en place d'un tableau de fichiers à charger, puis de mettre le script de charge dans une fonction. Alors je voudrais étape à travers chaque élément de tableau à l'aide de ce code:

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

source d'informationauteur Shea