ユーザーがサイトに入ると読み込まれる50個のサムネイルのページがあります。
divを作成するloading...
か、アニメーションGIFを使用して、サムネイル画像がまだ読み込まれていることを表示し、読み込まれた画像に切り替えることを検討しています。
純粋なJSまたはjQueryを使用するのに最適なオプションは何ですか?また、このようなものにどのようにアプローチしますか?
前もって感謝します
ユーザーがサイトに入ると読み込まれる50個のサムネイルのページがあります。
divを作成するloading...
か、アニメーションGIFを使用して、サムネイル画像がまだ読み込まれていることを表示し、読み込まれた画像に切り替えることを検討しています。
純粋なJSまたはjQueryを使用するのに最適なオプションは何ですか?また、このようなものにどのようにアプローチしますか?
前もって感謝します
画像のロードイベントにバインドできます。
var img = new Image(640, 480);
img.src = '...';
$(img).bind('load', function() {
// Has loaded
});
たぶん、各画像は内にありli
ます。li
のクラスを持つ'sを使用してページをロードできますloading
。CSSを使用してスタイルを設定し、読み込みビットを希望どおりに表示します。画像のイベントにバインドし、コールバックで親からクラスをload
削除します。loading
li
jQueryライブラリのオーバーヘッドを回避するために、純粋なjavascriptを使用できます。ただし、サイトですでに使用している場合は、使用してみてください。
$(window).ready()
の代わりに使用できます$(document).ready()
。document
DOM の準備ができたときに発生する場合は、window
すべての要素の準備ができたときに発生します。唯一のことは、外部ファイルがあり、サーバーが利用できない場合、スクリプトは実行されないということです.