本当に大きな画像がロードされているときに、どのように読み込み画面を表示できますか？

Question

私は5MBの画像を読み込むのに約2〜3分かかります。それが読み込まれている間、私は読み込み画面を持っています。画像がロードされた後、その読み込み画面が消えます。 （画像はスプライト画像です;私はそれを分割するためにCSSを使用します）。

これが可能であれば、どうすればいいですか？これが不可能な場合は、画像の読み込みを隠す（または画像サイズを小さくする）ために、他にどのような方法がありますか？

Answer 1

その画像はスプライト画像です。

私はそれらを分割するためにCSSを使用します。

追加情報が記載されていない限り、5MBでCSSスプライトの利点を無効にしています。別々のファイルに分割し、必要に応じて遅延ロードします。

jQueryを使用している/使用している場合は、this pluginはレイジーローディングを行います。

最高のcompressionを使用していることを確認してください。ロスレス圧縮を使用する必要がある場合でも、画像ファイルからメタデータを削除することで、いくらかの利点が得られます。

Photoshopの「Save for Web」は、非可逆圧縮（品質対サイズ）のバランスをとるのに最適で、画像ファイルにメタデータを埋め込むこともできません。 Photoshopにアクセスできない場合はYahoo SmushItのようなツールを使用できます。

Answer 2

だけでイメージがロードされた後、いくつかのロード層の背後にあるページ/要素を非表示にし、そのレイヤーを削除します。

<!-- within you site header --> 
<script type="text/javascript"> 
/* display loader only if JavaScript is enabled, no JS-lib loaded at this point */ 
document.write('<div id="loader" style="display:table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: #fff;">' 
    + '<div style="display:table-cell; vertical-align:middle; text-align: center;">' 
    + 'loading…<br /><img src="icon.load.gif" />' 
    + '</div></div>'); 
</script> 


<!-- at the bottom of you HTML (right before closing BODY-tag) --> 
<script src="jquery.min.js"></script> 
<script type="text/javascript"> 
/* hide the loading-message */ 
$(window).load(function(){ 
    $('#loader').fadeOut(500); 
}); 
</script> 

トリックは、すべてのページの内容まではクビにしない、イベントハンドラとして$(window).load()を使用することです完全にロードされている。