javascript - jsでソースセットしたときに画像が読み込まれるかチェック？

Question

jqueryから画像ソースを設定しているときに、画像が読み込まれていることを確認するにはどうすればよいですか。マウスオーバーで画像を変更したいのですが、画像サイズが大きいため読み込みに時間がかかるため、読み込まれるまで読み込み中の画像を表示したいです。

ここに私のコードスニペットがあります:

timer = setInterval(function() {
selector.attr('src',  'localhost/product/image1.jpg');

image1 は 436x436 で、読み込みに時間がかかるため、この画像を読み込む前に読み込み中の画像を表示したい

私を助けてください...

Answer 1

以下のコードを使用

 selector.attr('src',  'localhost/product/image1.jpg');
 //show loader code here 
 var loadImage = new Image();
 loadImage.src = selector.attr('src');
  loadImage.onload = function(){
    // hide loader code here
 }

Answer 2

//show image on mouseenter event
img.addEventListener('mouseenter',function(){
    this.setAttribute('src',  'localhost/product/image1.jpg');
    //show loading image here
});
img.addEventListener('load',function(){
    //Image loaded. So remove loading image here.
});

Answer 3

ページの読み込み時に 2 つの画像を読み込み、ヘッダーに配置します

これを試して：

if (document.images) {
    img1 = new Image();
    img1.src = "imgpath/image1.png";
    img2 = new Image();
    img2.src = "imgpath/image2.png"";
}

Answer 4

以下の関数を使用して、画像の読み込みコールバックを取得できます。

$("#idOfImage").load(function() { /* image loaded */})
               .error(function() { /* error in loading */ });