Comment faire pour afficher un “chargement” gif image sur une image de l'espace réservé au cours de lazyload

Je suis en utilisant ce plugin jQuery pour lazy-load mes images. Lazy Loader

Il fonctionne très bien. Je veux juste montrer un "chargement" image gif (peut-être) sur le dessus de tous ceux de l'image qui ne sont pas encore chargés, qui disparaît lorsque l'image se charge.

Une idée de comment faire cela.

FYI: je suis l'aide d'une 1x1 image gif comme un espace réservé.

InformationsquelleAutor web-nomad | 2012-05-10
  1. 5

    Je fais demo project pour au-dessus de votre condition cela fonctionne bien pour moi s'il vous plaît utilisez le code suivant pour que.

    Dans La Tête:

    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery.lazyload.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(function () {
                $("img.lazy").lazyload({
                    event: "sporty"
                });
            });
            $(window).bind("load", function () {
                var timeout = setTimeout(function () { $("img.lazy").trigger("sporty") }, 5000);
            }); 
        });
    </script>
    <style type="text/css">
        #container
        {
            height: 600px;
            overflow: scroll;
        }
    </style>

    Corps :

    <div id="container">
        <img class="lazy" width="765" height="574" src="loadingcirclests16.gif" data-original="bmw_m1_hood.jpg" /><br />
        <img class="lazy" width="765" height="574" src="loadingcirclests16.gif" data-original="bmw_m1_side.jpg" /><br />
        <img class="lazy" width="765" height="574" src="loadingcirclests16.gif" data-original="viper_1.jpg" /><br />
        <img class="lazy" width="765" height="574" src="loadingcirclests16.gif" data-original="viper_corner.jpg" /><br />
    </div>
    • Merci pour vos efforts! Quelle est la taille de loadingcirclests16.gif?
    • la taille de loadingcirclests16.gif petite. j'ai également une confusion à ce sujet sur comment je peut prendre différentes hauteur et la largeur de cette image.
    • C'est exactement là où je suis coincé...j'ai un chargeur de taille 16x16px...mais je l'ai mis là, il prend la taille de 765x574 tout comme dans votre exemple.
    InformationsquelleAutor Rony SP
  2. 1

    J'ai travaillé avec le Lazy Load dans WordPress thème. Et essayé la solution suivante pour l'animation de chargeur.

    1. Comme image d'espace réservé, j'ai utilisé un petit 64x64 gif avec un fond transparent.

      Image

    2. J'ai défini la feuille de style CSS pour l'image de sorte qu'elle a un arrière-plan coloré et un chargeur de GIF en arrière-plan de l'image.

      .lazyload{
    background-color:#555;
    background-image:url(loader.gif);
    background-repeat:no-repeat;
    background-position:center;
}

      Image

    3. Exécuter le script

      $("img.lazyload").lazyload({
    effect : "fadeIn"
});

      ou pour une version plus récente du plugin:

      lazyload();

    Il doit remplacer la couleur d'arrière-plan et l'image de chargement avec le scr attribut. Et le background styles n'aura pas d'effet sur l'image.

    CodePen.

    • Pas de travail....
    • Qu'est-ce exactement? Le chargeur de l'animation et de fond? Ou le Chargement différé ne remplace pas l'espace réservé à l'URL?
    • merci, ça aide
    InformationsquelleAutor mortalis