我们如何检测图像加载完成在我们的网页上

How do we detect image loading finished on our webpage?

本文关键字：我们 网页 加载 图像 何检测 检测      更新时间：2023-09-26

我想把图像放入字幕滚动文本中。因为字幕文本函数需要在开始滚动之前检测它正在滚动的项目(文本和图像)的长度。这只能在图像加载到页面上时完成，这将需要一些时间，因为我的图像来自服务器。所以，我需要知道图片是什么时候加载完成的这样我才能开始滚动。

下面是我现在使用的图像完成加载检测javascript。我用的是socket。IO接收图像信息:

  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()函数来检查图像是否已加载。它会检查1秒。之后，字幕滚动文本将开始。有时图像会加载完毕，但有时图像不会加载完毕，只是显示一个方形的空框。

我尝试将检查时间增加到5秒或10秒也没有用。有时它就是无法加载。我想它会把这个方形的空框当作已经加载的图片。

你们觉得怎么样?有没有更好的方法来检测图像完成加载?

看一下。load() jquery函数

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

如果使用

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

将在img加载完成后执行

相关文章：