Question

我想将图像放入一个字幕滚动文本中。由于选取框文本功能需要检测在开始滚动之前滚动的项目（文本和图像）的长度。这只能在图像加载到页面上时才会完成，这需要一些时间，因为我的图像来自服务器。所以，我需要知道图像何时完成加载，以便我可以开始滚动。

下面是我正在使用的图像完成加载检测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秒也没用。有时它只是不会加载。我认为它将方形空框视为已加载的图像。

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

Answer 1

看一下.load（）jquery函数。

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

如果您使用

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

将在img加载完成后执行。

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

1 个答案: