lazyload中にイメージプレースホルダの上に「読み込み中の」gifイメージを表示する方法

Question

私はこのjqueryプラグインを使用して画像を遅延ロードしています。 Lazy Loader

正常です。私はまだ読み込まれていないすべての画像の上に "ローディング"画像（gifかもしれない）を表示したいと思います。画像がロードされると消えます。

どのようにこれを行うか考えてください。

FYI：私は1x1 gifイメージをプレースホルダとして使用しています。

Answer 1

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

Answer 2

は私がWordpressのテーマにレイジーロードで働いていました。そしてアニメーション化されたローダーのために次の解決策を試してみました。

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

2. それは背景画像として色の背景やローダーGIFを持つように私は、画像のためのCSSスタイルを設定します。

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

   Image

3. スクリプトを実行し

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

   やプラグインの新しいバージョンのために：それは色付きの背景とLOを交換する必要があり

   lazyload(); 
   

scr属性を持つaderイメージbackgroundスタイルはイメージに影響しません。

CodePen。