4

読み込みに約2〜3分かかる5MBの画像があります。ロード中、ロード画面が欲しいです。画像が読み込まれると、その読み込み画面は消えます。（画像はスプライト画像です。CSSを使用して分割します）。

これが可能である場合、どうすればそれを行うことができますか？これが不可能な場合、画像の読み込みを非表示にする（または画像サイズを小さくする）ために他にどのような方法を使用できますか？

4

2 に答える 2

4

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

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

記載されていない追加情報がない限り、5MBではCSSスプライトの利点をすべて打ち負かしています。それを別々のファイルに分割し、オンデマンドで遅延ロードします。

jQueryを使用している/使用できる場合、このプラグインは遅延読み込みをうまく実行します。

また、可能な限り最高の圧縮を使用していることを確認してください。可逆圧縮を使用する必要がある場合でも、画像ファイルからメタデータを削除することで得られるメリットがいくつかあります。

Photoshopの「Web用に保存」は、不可逆圧縮（品質とサイズ）のバランスをとるのに最適であり、画像ファイルにメタデータを埋め込まないオプションも提供します。Photoshopにアクセスできない場合は、YahooSmushItなどのツールを使用できます。

于 2012-05-04T09:27:04.457 に答える
1

ページ/要素をいくつかの読み込みレイヤーの後ろに隠し、画像が読み込まれた後にそのレイヤーを削除するだけです。

<!-- 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…&lt;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()すべてのページコンテンツが完全にロードされるまで起動されないイベントハンドラーとして使用することです。

于 2012-05-04T10:03:52.140 に答える