進行状況バーを表示画像用

Question

おはよう、

私はウェブサイトを構築しており、リモートWebサイトから画像を読み込みます。画像が完全に読み込まれるまで、ページは空白になります。私は誰かが私に、パーセントで表示されているイメージの進捗状況を表示したり、ブートストラップのプログレスバーのようなものを使用したりすることを見せてくれることを望んでいました。

<img src="http://www.someWebSite.com/testImage.png" alt="Test"> 

推奨事項：

は、今私は、純粋なHTMLを使用していますか？

Answer 1

ブートストラップ（または他のフレームワーク）の使用をお勧めします。擬似コード

1. yourDivが親のdivで、
2. 読み込んでアニメーション
3. yourImage HTMLイメージ

Answer 2

チェックアウトさをロードしている

('#yourDiv').append(#loading); 
('#yourImage').onLoad(function(){ 
    ('#yourDiv').append(#yourImage); 
    ('#yourDiv').delete(#loading) 
}); 

を作るためのjQueryを使用した イメージのロードの進行状況を表示する方法を説明するこのスレッド JavaScript loading progress of an image