2

この jQuery プラグインを使用して、画像を遅延読み込みしています。レイジーローダー

正常に動作しています。まだ読み込まれていないすべての画像の上に「読み込み中」の画像（おそらくgif）を表示したいだけで、画像が読み込まれると消えます。

これを行う方法はありますか。

参考:プレースホルダーとして 1x1 の gif 画像を使用しています。

4

2 に答える 2

6

上記の要件のためdemo projectに、これはうまく機能しています。そのために次のコードを使用してください。

頭の中:

<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>

体 ：

<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>
于 2012-05-10T09:42:43.360 に答える
1

Lazy Load in Wordpressテーマを使用しました。そして、アニメーションローダーに対して次のソリューションを試しました。

  1. 画像のプレースホルダーとして、背景が透明な小さな 64x64 gif を使用しました。
    画像

  2. 画像の CSS スタイルを設定して、色付きの背景とローダー GIF を背景画像として設定しました。

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

    画像

  3. スクリプトを実行する

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

    またはプラグインの新しいバージョンの場合:

    lazyload();

色付きの背景とローダーの画像を scr 属性に置き換える必要があります。また、backgroundスタイルは画像には影響しません。

コードペン。

于 2015-03-23T13:52:22.540 に答える