jqueryで画像をロードする簡単なインジケータ

高速インターネットはまだすべてのデバイスで利用できるわけではないため、すべてのデバイスで利用できるわけではないため、画像をダウンロードするプロセスを改良するのが良いという考えが浮上しました。 このタスクはあまり機能的ではありませんが、デザインマニアは、画像のロードの表示を実現するのがどれほど簡単かという質問を繰り返し自問していると思います。



かなりの時間をかけて検索した結果、この機能を実装する非常に簡潔なjqueryスクリプトが見つかりましたが、設計には多くの要望が残っていたため、このコードを変更することにしました。 そして、これはそれから来たものです。



このタスクを実行するには、画像コンテナー、画像自体、およびブロックインジケーターが必要です。 ロード中、ローダーブロックは画像​​をマスクし、ロードインジケーターを中央に表示します。 画像を読み込んだ後、ブロックは消えます。 このスクリプトは、1ページの多くの写真に適用するとうまく機能します。



UPD：コメンテーターの議論と貴重な貢献を考慮してコードが変更されました

HTML

<!--[if IE]><style>.loading {display: none !important;}</style><![endif]--> <!--   IE --      .      IE10, IE11,       jQuery  --> <div class="container"> <!--       --> <b class="loading"></b> <!--   c  --> <img src="http://lh5.ggpht.com/-eglPTUEmd7I/UIePRUwEfvI/AAAAAAAAAEw/dkL3SmB7z7A/s9000/beautiful%2Bnature%2B2.jpg" class="image" /> <!--   --> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jQuery

 $(function() { if(navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i)) { $('.loading').hide(); } $('.image').load(function() { $(this).parent().find(".loading").hide(); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS

 body { background: #333; } .container { position: relative; margin: 20px auto; width: 300px; height: 200px; border: 5px solid #FFF; } .loading { position: absolute; display: block; background: #555 url('http://katushka.in.ua/templates/katushka2/images/ajax-loader.gif') center center no-repeat; opacity: 0.7; width: 100%; height: 100%; } .image { width: 300px; height: 200px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jsFiddleの例を参照してください。



この例の写真の幅は4000ピクセルよりも広いため、あまり高速でないチャネルを使用している場合、これらの美しさに気づいたと思います。

注釈

• この例では、アニメーションGIFを読み込みインジケーターとして使用します。 同様のサービスpreloaders.netを生成できます。
• 純粋なCSS： cssload.netおよびJS： spin.jsインジケーターを使用できます。
• 迅速なキャッシュクリーニングのためのChrome拡張機能： キャッシュのクリア 。
• コードはIE7では機能しません。 それ以降のバージョンでは動作しない可能性があります-チェックする方法がありませんでした。
• 新しいネイティブファームウェアを搭載した一部のASUSルーター（RT-N16など）には、デバッグに役立つ速度制限機能があります。