Chargement de GIF (Preloader) se coince uniquement sur Chrome

J'ai une galerie sur mon site. La galerie contient 15 images, chacun d'eux est d'environ 500KO (taille totale est de 7,5 MO).

Parce que la galerie prend un certain temps à charger (25 secondes sur mon ordinateur, c'est dur dépend de la connexion), je veux que le visiteur de connaître la galerie est en cours de chargement, d'où le Ajax chargement GIF.

Je veux que le visiteur de voir le chargement GIF dès qu'il entre dans la page de la galerie, jusqu'à ce que la galerie d'images ont été téléchargées et sont prêtes à être visionnées.

Afin d'atteindre mon but, c'est ce que j'ai fait:

C'est le début du corps de la galerie de la page HTML:

<body>
    <img src="images/ajax-loader.gif" alt="" class="hiddenPic" /> 
    <!-- loading Ajax loading GIF before all the other images -->

Et c'est la galerie CSS partie:

#gallery {
  background: url(images/ajax-loader.gif);
  background-repeat:no-repeat;
  background-attachment: fixed;
  background-position: center;

Donc, fondamentalement, le chargement GIF doit être téléchargé dès qu'un visiteur accède à la page de la galerie, parce que c'est le premier objet à l'intérieur de la <body> qui va être téléchargé. Cependant, il n'est pas visible en raison de la hiddenPic classe.

Cette méthode devrait vous aider à faire le chargement GIF prêt et le plus visible de la galerie, arrière-plan dès que possible, jusqu'à ce que toutes les images de la galerie ont été téléchargés et la galerie est prêt.

Cependant, le chargement GIF ne fonctionne pas correctement sur Google Chrome; il fonctionne parfaitement bien sur Firefox & IE (filature parfaitement) - mais se coince (ne tourne pas correctement) sur Chrome, à partir du moment où il apparaît, jusqu'à la galerie est prêt.

Mise à jour: je sais que je peux mettre en œuvre une meilleure galerie (comme suggéré dans les commentaires) qui demandent moins de ressources de l'utilisateur, lors de l'entrée de la galerie de la page mais je ne comprends pas comment cela peut être la cause du problème lorsque le GIF chargeur fonctionne parfaitement sur Firefox & IE.

Pourquoi ne pas l'Ajax chargement GIF fonctionner correctement sur Chrome?

Le chargement de votre site web, il semble fonctionner comme prévu, même en Chrome (v21.0.1180.77 m). Certainement, lorsque je charge la page, je me suis présenté avec le GIF spinner, qui, plus tard, sera remplacé par la galerie. Je dirais que c'est assez lent, c'est à dire. Je ne vois pas le spinner "spin" je viens de voir ça dans 3 ou 4 différentes positions, mais c'est sans doute vers le bas pour charger le reste de la galerie et mon PC est un peu lent. Cependant, je suis le chargement de la galerie dans environ 5-6 secondes pas les 25 secondes, vous le suggérer que peut-être affecter les résultats.
Aussi, alors je pense que vous devez absolument avoir un GIF spinner, je me demande si vous devriez être le chargement de l'ensemble de la galerie tout de suite, pour deux raisons: 1) il ralentit l'ensemble de la page 2) déchets de bande passante que les gens ne peuvent pas voir toutes les photos. Je voudrais explorer un processus de soit 1) le chargement de chaque image lorsqu'elle est sélectionnée (de manière gif spinner pour chaque image) ou 2) charge de dire les 3 premiers. Puis, quand ils ont frappé "à Côté de l'Image" (pour afficher l'image 2) chargement de l'image 4. Ils ne verra pas la différence, mais il est beaucoup plus rapide et efficace.
Donc, la raison de la toupie est coincé car le chargement de la galerie d'images prend le plus de ressources? Je veux faire un chargeur de spin - le GIF n'est pas lourd, donc je ne vois pas pourquoi il se bloque et je ne peux pas le faire tourner correctement, même (et seul) lorsque les images sont téléchargées sur l'ordinateur. Concernant votre suggestion, cela sonne comme un excellent moyen de raccourcir le temps d'attente et de le faire fonctionner rapidement. Je ne suis pas sûr de ce qui est mieux, mais si je vais utiliser n'1-je ajouter des vignettes à ma galerie.
Mais, la encore, il fonctionne parfaitement sur IE - le chargeur tourne parfaitement jusqu'à ce que la galerie est prête, mais pas sur Chrome. Il doit y avoir une raison pourquoi il se comporte de façon différente sur les différents navigateurs.
Oui malheureusement je ne peut pas fournir une solution pour le Chrome, d'autant plus qu'il semble fonctionner correctement (si un peu "saccadé" le mouvement) dans ma version de la configuration de Chrome. Peut-être que vous pourriez essayer de chargement avec seulement un ou deux images de la galerie et voir si ça aide à afficher les choses correctement, auquel cas il est presque certainement les autres images accaparer les ressources. Malheureusement je ne connais pas assez bien le navigateur détails techniques pour être en mesure de suggérer des raisons pour lesquelles il pourrait se charger correctement chez certains et pas chez d'autres.

OriginalL'auteur amiregelz | 2012-08-16

  1. 5

    Vous avez juste besoin de supprimer cette déclaration sur la ligne 602:

    background-attachment: fixed;
    Je l'ai changé (c'est en live sur le site pour le moment) - mais le GIF chargeur obtient toujours bloqué dès qu'il apparaît, jusqu'à ce que la galerie est chargé.
    eh bien j'ai trouvé le problème: vérifier ma mise à jour.
    Enfin une vraie solution! Ça fonctionne parfaitement maintenant 🙂 je ne pouvais pas trouver aucune info cependant sur les raisons de cette déclaration, les dégâts de la façon dont le GIF est de se manifester et de le faire tourner sur Google Chrome. Aussi, dois-je garder la nouvelle hiddenPic attribut? quelle est la différence?
    il y a un différence.
    Et importe-t-il dans mon cas? J'ai déclaré <img src="images/ajax-loader.gif" alt="" class="hiddenPic" /> afin de rendre le navigateur charge le plus tôt possible lors de la saisie de la page de la galerie, mais je ne suis pas sûr que ça fait une différence quand même, parce que le navigateur charge la style.css fichier avant de le corps html, par conséquent, l'application de la #gallery { background: url(images/ajax-loader.gif); } très rapidement.

    OriginalL'auteur Knu

  2. 3

    J'ai également eu le même problème. La façon dont je le fixe, c'était de mettre le chargement gif dans son propre élément (pour garder le balisage nettoyer, utilisez un pseudo-élément).

    Maintenant, au lieu d'utiliser l'arrière-plan-la règle de rattachement, vous pouvez utiliser la position: fixed. Voici le code que vous devez utiliser (en supposant que vous aimeriez que le chargeur de gif de s'asseoir droit dans le milieu de l'écran):

    #gallery:after {
    content: "";
    background: url(images/ajax-loader.gif);
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px; /*change to the width of your image*/
    height: 50px; /*change to the height of your image*/
    margin-left: -25px; /*Make this 1/2 the width of your image */
    margin-top: -25px; /*Make this 1/2 the height of your image */
}

    Espérons que cette aide!

    OriginalL'auteur matthewmatician

  3. 1

    Je suis un ardent défenseur de l'aide dataURI avec base64des images codées dans ce type de situations. Ce qu'il n'est effectivement élimine le besoin d'ajouter une requête http pour récupérer le spinner gif, ce qui signifie le "chargement" de l'animation est immédiatement disponible pour le rendu. Ce qui fait la valeur du UX d'amélioration donc plus de valeur qu'un couple supplémentaire de kilo-octets de surcharge - surtout depuis la feuille de style ne serait qu'une fois téléchargé, puis mis en cache par le client.

    Ce violon a l'animation intégrées à partir de ajaxload.info, ayant ajouté littéralement moins de 1 KO à la finale de la CSS.

    Noter que ce type de ressource de l'incorporation n'est pas pris en charge sur IE7 (mais les utilisateurs d'IE7 ont beaucoup plus de préoccupations à l'adresse 🙂

    Quand devrais-je utiliser les données URI, encodé en base64 des images en général? Où est-il particulièrement excel?
    de l'omi, à chaque fois que la surcharge de codage est moins cher que de les séparer des connexions et de l'extrême réactivité est exigée, "chargement" gfx est un exemple classique où vous ne voulez pas que l'utilisateur d'attendre pour charger 🙂 j'ai aussi envisager de ressources pour l'intégration basé sur la façon dont souvent il est utilisé à travers le site, serait spriting il sera plus difficile (icônes sont appliquées de manière partielle, les décors sont particulièrement difficiles) et serait-il préférable de déclarations css (gradients/motifs prennent plus d'espace pour déclarer, de plus, il est nominale de calcul de frais généraux par rapport à la pré-rendu graphique est utilisé)
    Mon GIF de chargeur de données d'URI code, lorsque encodé en base64, douloureusement longue. Est-il encore utile de l'utiliser? Je vois qu'il ya un retard car il faut du temps pour décoder le code base64, mais c'est assez lent à cause de la longueur du code.
    par cette logique, nous devrions tous utiliser des bitmaps 🙂 votre jsfiddle rend instantanément pour moi (pas le meilleur de matériel). Il y a un décent de ressources couvrant les principaux points, si vous avez besoin de plus d'info, vous devriez vraiment poser une nouvelle question.

    OriginalL'auteur o.v.

  4. 0

    Vous pouvez essayer cette aide jQuery BlockUI Plugin (v2)

    Espère que cette aide.

    OriginalL'auteur blasteralfred Ψ

  5. 0

    Personnellement pour chargeuses j'ai toujours fait de cette manière , je ne me souviens pas où je l'ai lu .. Mais sa a toujours travaillé pour moi ..

    $(function(){ 

$('#overlay") 
.hide() 
.ajaxStart(function() { 
$(this).css("display","inline"); 
}) 
.ajaxStop(function() { 
$(this).hide(); 
}); 
});

    Ce qu'il fait , il prend la div avec un id de overlay et sur toute requête AJAX qui va sortir , rend visible et une fois que la requête ajax est complet , il le cache.

    Laissez-moi savoir si u besoin de plus de code.

    Acclamations.

    Pourriez-vous me montrer un exemple de cette méthode (e.g jsFiddle)?
    Ici, vous allez @amiregelz : jsfiddle.net/nWDUg

    OriginalL'auteur Shrayas

  6. -1

    Dans le CSS pour #gallery

        background-position: center;

    Devrait être

        background-position: center center;

    Vous devriez également essayer d'utiliser jQuery. Voir http://yulounge.alienworkers.com/photogallery/ pour un exemple.

    OriginalL'auteur Nadim