Comment puis-je cacher un contenu de page jusqu'à ce que toutes les images soient complètement chargées?

J'essaie d'optimiser un site qui coûte terriblement. J'ai déjà réorganisé, comprimé et minifié js et css, mais le plus gros problème sont les images. Ce site comporte des images très lourdes, alors, lorsqu'il commence à charger les sauts de contenu pendant que toutes les images sont chargées.

Je ne peux pas définir manuellement la hauteur des divs contenant les images car elles sont soumises par l'utilisateur, et bien que la largeur soit une valeur fixe, la hauteur ne l'est pas.

Je comprends que ce n'est probablement pas une bonne pratique, mais je pense qu'il vaut mieux que la page dure deux secondes avant de montrer le contenu, qu'il soit nerveux et inutilisable pendant ces deux secondes.

1.) Est-ce techniquement possible? Comment? (J'aimerais savoir cela, même si ce n'est pas une bonne pratique)

2.) Si ce n'est pas une bonne pratique, comment éviter ce problème?

C'est très simple avec JQuery . Je recommanderais d'utiliser ce cadre de toute façon, même si ce n'était pas pour cette solution particulière:

function preload(arrayOfImages) { $(arrayOfImages).each(function(){ $('<img/>')[0].src = this; }); }

Utilisez-le comme ceci:

 preload([ 'img/apple.jpg', 'img/banana.jpg', 'img/pear.jpg' ]);

Cacher votre site à ce stade est facile avec CSS et JQuery:

CSS:

 body { display:none; }

JQuery:

 $(function(){ $('body').show(); // or fade it in: $('body').fadeIn(); });

Juste après l'étiquette du corps, ajoutez un élément Div pour couvrir toute la longueur et la largeur de la page, faites-le fond blanc ou ajoutez une image "Chargement", définissez son index z à Max (9999 ou quelque chose), donc c'est en haut de Tout, et lui donner un ID / Nom

Et utilisez un événement Javascript avec Body onLoad pour masquer ou supprimer cet élément Div.

Quelque chose comme

 <body onload='document.body.removeChild(document.getElementById("bigDiv"));'> <div style="width:100%;height:100%;background:white;" id=bigDiv>Loading...</div>

Première chose importante à vérifier – assurez-vous que les images sont mises en cache. Parfois, la mise en cache des images est désactivée. La façon de vérifier ceci est un appel direct au serveur web:

  telnet localhost 8080 GET /images/flibble.gif HTTP/1.0

Et voir ce qui est retourné. Il devrait renvoyer quelque chose comme Expire: ou Cache-Control.

Cette page semble la décrire bien: http://www.web-caching.com/mnot_tutorial/how.html

L'autre astuce consiste à spécifier la taille des images dans la balise. Cela améliore considérablement les performances car le navigateur n'a pas besoin d'attendre que la page soit chargée.

J'ai déjà écrit mon pré-chargeur d'image js, ce que je vais publier est pseudo-similaire à celui-ci, mais il faudra du travail. Fondamentalement afin de rendre votre page bien chargée, la réponse est de ne pas cacher le corps pour l'empêcher de sauter, plutôt embellir ce qui se passe lorsque les images sont chargées. En plus de jeter le bébé avec l'eau du bain, généralement les sites apparaissent à l'utilisateur pour charger plus vite s'ils peuvent voir quelque chose se produire pendant qu'ils attendent.

Donc, ce que vous devez faire (pour chaque image, ou au moins chaque image majeure ou grande) affiche un gif de chargement (consultez http://ajaxload.info ) pendant que l'image est chargée, puis, quand il est terminé, vous pouvez utiliser jQuery pour Animer son conteneur à la hauteur correcte et disparaître dans l'image. Cela empêche votre page de sauter (ou plutôt la rend plus jolie quand elle saute).

Pour atteindre cet effet, quelque chose comme ça devrait faire l'affaire:

 function imageLoader(elem) { //set all images in this elem to opacity 0 elem.children('img').css('opacity', '0'); var image = new Image(); //show loading image elem.append('html for loading image'); //when the image loads, animate the height of the elem and fade in image image.onload=function() { var h = image.height; elem.animate({height:h+'px'}, function(){ elem.children('img').fadeIn(); elem.children('html for loading image').remove(); }); }; image.src=elem.children('img').attr('src'); }

Utilisez-le comme ceci:

 imageLoader($('someElementWithAnImageTagInside'));

Encore une fois, c'est vraiment psuedocode, mais j'espère que vous devriez vous donner quelques idées.

J'espère que cela t'aides

U peut utiliser un plugin de blocage pour bloquer la page. Lien