イメージのロードイベントがあります。 image.srcが設定される前にロードハンドラを設定する限り、画像が正常に読み込まれたとき、または読み込み中に何らかのエラーが発生したときに通知を受け取る必要があります。私は次の画像がいつ表示されるかを知っているので、画像が指定された時間を1秒以上遅らせていれば待っているカーソル（あなたが望むようなアニメーションgif）を表示します。ユーザが何が起こっているかを知るための表示時間。
は一般的には、このような何かを行うことができます：あなたがイメージのロードを開始し、successHandlerが呼び出されたときにそれを隠すときに、このようなコードを使用して
function loadImage(url, successHandler, errorHandler) {
var myImg = new Image();
myImg.onload = myLoadHandler; // universally supported
myImg.onabort = myErrorHandler; // only supported in some browsers, but no harm in listening for it
myImg.onerror = myErrorHandler;
myImg.src = url;
function myLoadHandler() {
successHandler(myImg, url);
}
function myErrorHandler() {
if (errorHandler) {
errorHandler(url);
}
}
}
は、あなたが待機カーソルを表示することができます。
これらのイベントのリスナーが他にあった場合は、onload、onabort、onerrorの代わりにaddEventListenerまたはattachEventを使用する必要がありますが、リスナーが1つしかない場合はいずれかの方法があります。
希望の画像があらかじめわかっている場合は、後で使用できる画像をプリロードする方がユーザーの操作性が優れていることがあります。これにより、ブラウザのメモリキャッシュに格納され、必要に応じて即座に表示されます。 HTMLまたはJSのいずれかで画像をプリロードすることができます。 HTMLでは、必要なすべての画像のWebページにタグを挿入するだけです（ただしCSSで非表示にする）。これはpreloadImageURLs、アレイ内のすべての画像は、このように任意のを防止し、ウェブページの生活の中で、後に即座にプリロードして利用できることになります
// image URLs to preload
var preloadImageURLs = [
"http://photos.smugmug.com/935492456_5tur7-M.jpg",
"http://photos.smugmug.com/835492456_968nf-M.jpg",
"http://photos.smugmug.com/735492456_3kg86-M.jpg",
];
var preloads = []; // storage for preloaded images
function preloadImages() {
var img, i;
for (i = 0; i < preloadImageURLs.length; i++) {
img = new Image();
img.src = preloadImageURLs[i];
preloads.push(img);
}
}
を：JSでは、単に画像アレイを作成し、画像オブジェクトを作成します画像がロードされるのを待っている間にユーザーが遅れる明らかに、プリロードされた画像が実際に読み込まれるまでの時間は短いですが、通常、ユーザーがWebページとやりとりする前に起こる小さな画像のため、画像を使用するWebページの動的部分にもっと速く触れることができます。
