jQuery Girl
  1. jQuery Girl
  3. Comment écrire un pré-chargeur Javascript?
Intereting Posts
Compte Google DropDown dans JQuery Comment insérer du texte dans l’image? La classe à bascule jQuery avec delay ne fonctionne qu’une seule fois comment pourrais-je stocker un object javascript en tant qu’atsortingbut de données et le modifier Existe-t-il un plugin jQuery pour les calendriers Hijri? JQuery sortingable sortingables imbriquables Comment jQuery protège-t-il l’écrasement de jQuery et de $ Le widget jQuery sélectionné ne fonctionne pas dans la vue Compatibilité de IE8 Comment puis-je appeler une fonction plusieurs fois? jquery avertit si vous quittez la page sans cliquer sur le bouton de sauvegarde Comment naviguer en interne dans la même page en utilisant des liens en HTML5, JQuery mobile ..? jquery change url du formulaire soumettre Manipuler des valeurs personnalisées avec jQuery Comment puis-je insérer dynamicment un nouveau modèle dans le DOM avec Ember? Ajout d’une URL à un Iframe appelé par Fancybox2-AJAX en fonction de l’ID de l’Iframe

Comment écrire un pré-chargeur Javascript?

Je ne parle pas de la manière de précharger des images à l’aide de Javascript , je pense plutôt à un préchargeur Flash qui affiche une sorte de retour pendant le chargement du fichier SWF.

Le site en question utilise beaucoup de Javascript et nécessite de nombreuses images volumineuses au chargement de la page. Je souhaite donc masquer le site derrière un écran de chargement jusqu’à ce que les images initiales soient toutes chargées.

J’ai écrit un plugin jQuery appelé waitForImages qui vous permet de le faire.

Les callbacks vous permettent de faire n’importe quoi quand chaque image est chargée … 

 $('body').waitForImages( function() { // Called when all images have loaded. }, function(loaded, total, success) { // Called once each individual image has loaded. // `loaded` is the number of images loaded so far. // `total` is the total number of images to load. // `success` is `true` if the image loaded and `false` if the image failed to load. // `this` points to the native DOM `img` element. }, // Set the third argument to `true` if you'd like the plugin to look in the CSS // for references to images. true );

jsFiddle .

J’ai un écrit quand j’ai appris le JavaScript. Je vais essayer de le trouver dans une seconde. L’idée de base est d’avoir un élément caché en dehors de la page et d’y charger votre image.

Méfiez-vous, le code laid que j’ai écrit quand j’ai commencé. En outre, ce n’est probablement pas exactement ce que vous recherchez, bien qu’il y ait de bons commentaires. Il suffit de le modifier et d’en faire une fonction générique. Basé sur jQuery, pour une galerie javascript: 

 this.preload = function(){ /* * Preloads all the image to a hidden div so the animation won't glitch. */ if (document.getElementById("preload")){ // Checks for existance. var preload = document.getElementById("preload"); // Gets the preload div if it exists. } else { var preload = document.createElement("preload"); // Creates the preload div if it doesn't exist. $(preload).attr("id", "preload"); } for (var i=0; i