监控后台图片加载纯javascript答案

【问题标题】：Monitoring background image load pure javascript监控后台图片加载纯javascript
【发布时间】：2016-01-06 19:29:39
【问题描述】：

我有一个简单的代码：

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

我想监控这个 div 加载，当它成功执行某项操作时，如果加载时间超过 5 秒，请执行其他操作。

我正在尝试做：

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

但我相信它只适用于视频和音频。否则它会在它完成时得到。

【问题讨论】：

标签： javascript load background-image monitoring

【解决方案1】：

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

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>

【讨论】：

太棒了...我加载 jquery 只是为了使用 .load()
这很好。伟大的工作伙伴。

【解决方案2】：

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

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

【讨论】：

谢谢，但我在里面放了一个警报，它不起作用。
对不起，我读错了问题，以为是图像元素。您不能在单个 div 上放置 onload 侦听器，因为它不是外部资源。