J'ai une galerie sur mon site web. La galerie contient 15 images, chacune d'entre elles est d'environ 500 kb (taille totale est de 7,5 Mo).
Parce que la galerie prend un certain temps à charger (25 secondes sur mon ordinateur, cela dépend de la connexion), je veux que le visiteur connaisse la galerie est en cours de chargement, d'où le ajax chargement gif .
Pour atteindre mon objectif, c'est ce que j'ai fait: C'est le début du corps de la galerie HTML Page: < / p> et ceci est la galerie partie CSS: si fondamentalement, le gif de chargement Devrait être téléchargé dès qu'un visiteur entre dans la page de la galerie, car il s'agit du premier objet à l'intérieur du Cette méthode devrait vous aider à préparer le gif de chargement prêt et visible comme l'arrière-plan de la galerie dès que possible, jusqu'à ce que toutes les images de la galerie ont été téléchargés et la galerie est prête. Cependant , le gif de chargement ne fonctionne pas correctement sur Google Chrome; Cela fonctionne parfaitement bien sur Firefox et c'est-à-dire sans faille) - mais se bloque bien (ne tourne pas correctement) sur chrome, à partir du moment où il apparaît jusqu'à ce que la galerie soit prête. Pourquoi le gif de chargement de AJAX ne fonctionne pas correctement sur chrome?
Hiddacic
6 Réponses :
Vous pouvez essayer ceci en utilisant J'espère que cela aide.
dans le CSS pour #gallery doit être Vous devez également essayer d'utiliser jQuery. Voir http://yulounge.alienkorkers.com/photogallery/ pour un exemple. < / p>
Je suis Un avocat fort d'utiliser Datauri avec Ce violon a l'animation intégrée à partir de ajaxload.info , après avoir ajouté littéralement moins de 1kb à la finale CSS.
Notez que ce type d'emboîtement des ressources n'est pas pris en charge du tout sur IE7 (mais les utilisateurs IE7 ont des préoccupations beaucoup plus importantes à adresser :) BASE64 Présentation des images dans cette situation et des situations similaires. Il élimine efficacement le besoin d'une requête HTTP distincte de récupération du gif Spinner, ce qui signifie que l'animation "Chargement" est immédiatement disponible pour être rendue. Cela rend la valeur de l'amélioration UX si plus précieuse qu'un couple de kilo-octets supplémentaires dans les frais généraux - d'autant plus que la feuille de style ne serait téléchargée qu'une fois, puis mis en cache par le client.
Quand devrais-je utiliser des images codées de données URI BASE64 en général? Où est-ce particulièrement exceller?
@AmireGELZ: IMO Chaque fois que la surcharge de codage est moins chère que les connexions distinctes et la réactivité extrême est demandée - "Chargement" GFX est un exemple classique où vous ne voulez pas que l'utilisateur attendra It de charger: ) J'envisage également des ressources pour l'intégration en fonction de la fréquence à laquelle il est utilisé sur le site, il serait plus difficile d'être plus difficile (les icônes appliquées comme des arrière-plans partiels sont particulièrement difficiles) et seraient-ils préférables aux déclarations du CSS (gradients / motifs prenant plus d'espace pour Déclarer, plus il existe des frais de calcul de calcul nominaux par rapport à la poursuite des graphiques pré-rendus)
Mon code URI de données GIF Loader, lorsqu'il est codé avec base64, est douloureusement long . Est-ce toujours la peine de l'utiliser? Je peux voir qu'il y a un retard car il faut du temps pour décoder le code de base64, mais c'est assez lent en raison de la longueur du code.
@AmireGelz: Par cette logique, nous devrions tous utiliser des bitmaps bruts :) Votre Jsfiddle rend instantanément pour moi (pas le meilleur matériel non plus). Il y a un Ressources décentes couvrant les points principaux , si vous avez besoin de plus d'informations, vous devez vraiment poser une nouvelle question.
Personnellement pour les chargeurs, je l'ai toujours fait de cette façon, je ne me souviens pas d'où je l'ai lu. Mais c'est toujours travaillé pour moi ..
$(function(){
$('#overlay')
.hide()
.ajaxStart(function() {
$(this).css("display","inline");
})
.ajaxStop(function() {
$(this).hide();
});
});
Il vous suffit de supprimer cette déclaration sur la ligne 602:
background-attachment: fixed;
Je l'ai changé (il est en direct sur le site Web en ce moment) - mais le chargeur GIF est toujours coincé dès qu'il apparaît, jusqu'à ce que la galerie soit chargée.
Enfin, une vraie solution! Cela fonctionne parfaitement maintenant :) Je n'ai trouvé aucune information cependant sur la raison pour laquelle cette déclaration dégage la façon dont le GIF apparaît et filant sur Google Chrome. De plus, devrais-je garder le nouvel attribut Hiddacic ? Y a-t-il une différence?
Et ça compte dans mon cas? J'ai déclaré 
afin de rendre le navigateur le charger dès que possible lorsque je saisie la page de la galerie, mais je Je ne suis pas sûr que cela fait une différence de toute façon, car le navigateur charge le fichier style.css.CSS. / code> avant le corps HTML, appliquant donc le #gallery {arrière-plan: URL (images / ajax-chargeur. gif); } très rapidement.
J'ai aussi eu le même problème. La façon dont j'ai corrigé était de mettre le gif de chargement dans son propre élément (pour garder le balisage propre, utilisez un pseudo élément).
Maintenant, au lieu d'utiliser la règle de pièce de fond de fond, vous pouvez utiliser la position suivante: fixe. Voici le code que vous devez utiliser (en supposant que vous souhaitez que le chargeur gif s'asseoir au milieu de l'écran): espère que cela vous aide! < / p>
Chargement de votre site Web Il semble fonctionner comme prévu, même en Chrome (V21.0.1180.77 M). Certes, lorsque je charge la page, je suis présenté avec le fileur GIF, qui est remplacé par la galerie remplacée plus tard. Je dirais que c'est assez lent, c'est-à-dire. Je ne vois pas le spinner "spin" Je viens de le voir dans 3 ou 4 positions diverses, mais cela est probablement en charge pour charger le reste de la galerie et que mon PC soit un peu lent. Cependant, je charge la galerie dans environ 5 à 6 secondes, pas les 25 secondes que vous suggérez donc d'affecter les résultats.
De plus, alors que je pense que vous devriez absolument avoir un spinner GIF, je me demande si vous devriez charger toute la galerie tout de suite, pour deux raisons: 1) il ralentit la page et 2) il gaspille la bande passante alors que les gens peuvent ne pas voir tous les des photos. J'explorerais un processus de 1) charger chaque image lorsqu'il est sélectionné (SO Spinner GIF pour chaque image) ou 2) Charger indique le premier 3. Puis quand ils appuient "Image suivante" (pour afficher l'image 2) Charger l'image 4. Ils ne verront aucune différence mais rendent beaucoup plus vite et efficace.
Donc, la raison pour laquelle la spinner est bloquée est que la chargement des images de la galerie prend la plupart des ressources? Je veux faire tourner le chargeur - le gif n'est pas si lourd, donc je ne vois pas pourquoi il est coincé et je ne peux pas le faire tourner correctement, même (bien, seulement) lorsque les images sont téléchargées sur l'ordinateur. À propos de votre suggestion, cela ressemble à un excellent moyen de raccourcir le temps d'attente et de le faire fonctionner rapidement. Je ne suis pas sûr de quelle manière c'est mieux, mais si je vais utiliser non'1, je dois ajouter des vignettes à ma galerie.
Mais, toujours - cela fonctionne parfaitement sur IE - le chargeur tourne sans faille jusqu'à ce que la galerie soit prête - mais pas sur chrome. Il doit y avoir une raison pour laquelle il se comporte différent sur différents navigateurs.
Oui Malheureusement, je ne peux fournir aucune solution au problème du chrome, en particulier car il semble fonctionner correctement (si un mouvement légèrement «saccadé») dans ma version / configuration de Chrome. Peut-être que vous pourriez essayer de charger avec une seule ou deux images de galerie et de voir si cela aide à afficher les choses correctement, auquel cas il s'agit certainement des autres images de collage. Malheureusement, je ne sais pas assez sur les technicosités du navigateur pour pouvoir suggérer pourquoi elle peut se charger correctement dans certains et non dans d'autres.
Je vous recommanderais d'implémenter le Galleria curseur. Il gère des images en utilisant un chargement progressif, téléchargeant seulement quelques images à la fois. Cela peut ou peut ne pas être exactement ce que vous voulez. Dans les deux sens, problème étrange avec le gif chargement si lent ... Votre HTML / JS semble assez simple et Google n'a rien abouti à "chrome gif gèle lors de la charge de la page".
Voici un nouveau lien . Et ceci est la classe HidaDidicPic:
.Checkic {affichage: aucun; } qui le rend invisible.@Chrisnicholson mériter peut-être la peine de mentionner que, bien que je n'ai pas changé la fonctionnalité de la galerie, j'ai réussi à résoudre le temps de chargement en optimisant (compression) les JPG de la galerie en utilisant JPGMini . C'est un outil incroyable; Il a réduit la taille de mes 15 photos de 8 Mo à 2 Mo sans perte de qualité visible, ce qui est assez impressionnant.