読み込みアイコンを大きなCSS画像に追加する

ページ上に大きな写真があり、ユーザーが読み込んでいることをユーザーに知らせたいとします。 JavaScriptを使用すると、まだアップロードされていないすべての画像にアニメーションアイコンを埋め込むことができますが、よりシンプルでクリーンな方法を提供できます。

ステップ1：アニメーションアイコンを見つける

ダウンローダー用に独自のイメージを作成できるサイトは多数あります。 私たちのお気に入りはこれです。 主なことは、重さのあるアイコンを選択しないことです。 生成したものは次のとおりです。

ステップ2：CSSルールを追加する

コードは非常に少なく、コピーするだけです。 「youricon.gif」を自分の写真に変更することを忘れないでください。

.load { background: url('images/youricon.gif') no-repeat center; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ステップ3：コードを適用する

いくつかの方法がありますが、最良の方法は、 load



クラスを使用してdiv



さらに多くの写真をラップすることです。 また、画像の幅と高さを設定する必要があります。

 <div class="load" style="width:200px;height:200px"> <img src="large.jpg" alt="alternate text" /></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで結果を見ることができます 。



Lim Chee Aunが言ったように、 div



で画像をラップすることはできませんが、次のようにします：

 <img src="large.jpg" alt="alternate text" class="load" style="width:200px;height:200px" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、最初にこの方法に言及しなかった理由は、写真が読み込まれなかった場合、サイトの外観を損なう可能性があるためです（記事の著者はIEの下に座っているようです-およそTransl。） 。 ダウンロードに問題がないことが確実にわかっている場合は、ローダーアイコンが中央に配置されておらず、写真がたくさんあるように感じます。この解決策は次のとおりです。

 img { background: url('images/youricon.gif') no-repeat center; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、注意してください-ブートローダーに白い背景がある場合、例えば、サイドコラムなどの黒い背景に落ちる可能性があります（透明な背景のアイコンはすでにコーシャーではないようです-およそTransl。） 。 したがって、これを行うことをお勧めします。

 #yourcontentdiv img { background: url('images/youricon.gif') no-repeat center; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最終結果をご覧ください！