监控后台图像加载纯javascript

Monitoring background image load pure javascript

本文关键字：javascript 加载 图像 后台 监控      更新时间：2023-09-26

我有一个简单的代码：

<div id="dk" style="background-image: url('d.jpg');"></div>

我想监控这个div加载，当它成功时，做一些事情，如果加载超过5秒，做其他事情。

我试着做：

document.getElementById('dk').addEventListener('loadeddata', function () {
        //do something
    }, false);

但我相信它只适用于vídeos和áudios。否则，它会在完成时得到。

我会做这样的事情（未经测试）：

function BackgroundLoader(url, seconds, success, failure) {
  var loaded = false;
  var image = new Image();
  // this will occur when the image is successfully loaded
  // no matter if seconds past
  image.onload = function () {
    loaded = true;
    var div = document.getElementById("dk");
    div.style.backgroundImage = "url('" + url + "')";
  }
  image.src = url;      
  setTimeout(function() {
    // if when the time has passed image.onload had already occurred, 
    // run success()
    if (loaded)
      success();
    else
      failure();
  }, seconds * 1000);
}

然后使用它：

<div id="dk"></div>
<script>
  function onSuccess() { /* do stuff */ }
  function onFailure() { /* do stuff */ }
  BackgroundLoader('d.jpg', 5, onSuccess, onFailure);
</script>

将事件侦听器更改为以下内容：

document.getElementById('dk').addEventListener('load', function () {
    //do something
}, false);
相关文章：