ウェブページで画像の読み込みを検出するにはどうすればよいですか？

Question

マーキースクロールテキストに画像を挿入したいと思います。マーキーテキスト機能は、スクロールを開始する前にスクロールしているアイテム（テキストおよびイメージ）の長さを検出する必要があるため、これは、イメージがページにロードされたときにのみ実行できます。これは、イメージがサーバーからのものであるため、しばらく時間がかかります。だから、私はスクロールを開始できるようにイメージがいつ終わったのかを知る必要があります。

以下は、私が今使っている画像仕上げローディング検出用のJavaScriptです。

var images_expected = 0; 
    socket.on('res-displaySetting', function(display){ 
     images_expected = display.runningText.length; 
     $('.marquee').marquee('destroy'); 
     var html = ""; 
     for(var k=0; k < display.runningText.length; k++) 
     { 
      if ((display.runningText[k].image == "") && (display.runningText[k].message == "")) 
      { 
       images_expected--; 
       continue; 
      } 
      else if (display.runningText[k].image == "") 
      { 
       html += display.runningText[k].message; 
       images_expected--; 
      } 
      else if (display.runningText[k].message == "") 
       html += " <img src='" + serverIP + "/img/" + display.runningText[k].image + "'> "; 
      else 
       html += " <img src='" + serverIP + "/img/" + display.runningText[k].image + "'> " + display.runningText[k].message; 
     } 
     $('.marquee').html(html); 

     if (html != "") initMarquee(); 
    }); 

    function initMarquee() { 
    interval = window.setInterval(checkImagesLoaded, 1000); 
    } 

    function checkImagesLoaded() {console.log("checking"); 
     if ($('.marquee img').length === images_expected) { 
      clearInterval(interval); 
      setTimeout(startMarquee); 
     } 
    } 

    function startMarquee() { 
    $('.marquee').marquee({duration: 8000}); 
    } 

画像がロードされていたかどうかを確認するためにcheckImageLoad（）関数があります：私は、画像情報を受信するsocket.ioを使用しています。 1秒間チェックします。その後、マーキースクロールテキストが開始されます。画像がロードされることもありますが、画像がロードされない場合がありますが、正方形の空のボックスが表示されることがあります。

チェック時間を5秒にするか、10秒も使用しないようにしてみます。ときどきロードされないことがあります。私はそれが正方形の空のボックスを既に読み込まれた画像と見なすと思います。

あなたはどう思いますか？画像の仕上がりの読み込みを検出する良い方法はありますか？

Answer 1

.load（）jquery関数を見てください。

https://api.jquery.com/load-event/

あなたは

$("img").load(function() { 
    // Handler for .load() called. 
}); 

を使用する場合は、IMGの読み込みが完了したときにそれが実行されます。