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
Vous devez vous connecter pour publier un commentaire.
Tant que le "chargement..." l'image est placé avant les autres éléments html, il doit se charger en premier. Cela dépend bien sûr de la taille de l'image. Vous pourriez mettre le div de chargement juste après le tag et la position à l'aide de la "position:absolute".
Concernant le code pour supprimer l'écran de chargement, la méthode consiste à effectuer les opérations suivantes.
Le code ci-dessous n'est pas de testicules de sorte qu'il peut ne pas fonctionner. Espérons que cela aide
Je ne suis pas sûr si c'est possible de les faire exécuter.
Si c'est le cas, essayez d'ajouter ce dans la tête de la balise:
En théorie, cela peut que le chargement et le cache de l'image avant tout.
Vous pouvez réutiliser des ressources prealoding prise en charge du navigateur.
Je ne suis pas sûr qu'il fonctionne sur tous les navigateurs, mais dans mon cas, cette approche me permet de charger les images de la première. Il permet aussi de définir des images concrètes afin de l'INTERFACE utilisateur spécifique peut être sauté
D'abord définir dans l'en-tête quelles sont les ressources que vous voulez de précontrainte et de définir la priorité des ressources
ou
Deuxième ligne permet d'augmenter le chargement de priorité dans tous les types d'objet (scripts /images /styles). Première ligne - seulement par les images.
Ensuite définir à l'organisme de liaison de l'image comme d'habitude:
Voici mon exemple de travail
https://jsfiddle.net/vadimb/05scfL58/
Je pense que si vous placez la balise IMG dans le haut de votre corps html, il sera chargé en premier. Si vous ne voulez pas déplacer votre div suffit d'utiliser une copie de la balise image. Une fois les images est chargé, il sera affiché dans chaque balise image qui montre la même image.
Ou vous pouvez utiliser spin.js comme le chargement de l'image. L'affichage de ce "cycle de chargement de l'image" via javascript.
Check it out sous:
http://fgnass.github.com/spin.js/