检查横幅是否已加载。

Question

检查横幅是否已加载。

5

你好，我有一个自定义的横幅广告，包含以下代码：

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Arial, serif;
  color: #003C78;
}

a {
  color: #003C78;
}

.banner-wrap {
  display: flex;
  width: 728px;
  height: 90px;
}

.page-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.page-container img {
  width: 100%
}

.image-wrapper,
.text-wrapper {
  position: absolute;
  height: auto;
  width: 411px;
}

.image-wrapper {
  top: 0;
  right: -155px;
  z-index: 2;
  animation: slideLeft 14.5s infinite ease 0s normal forwards;
}

.image-wrapper img {
  position: absolute;
  left: 0px;
  top: -100px;
  width: 150%
}

.text-wrapper h1,
.text-wrapper h2 {
  position: absolute;
  left: 90px;
  padding: 0;
  opacity: 0;
  z-index: 3;
  font-size: 1.3em;
}

.text-wrapper h1 {
  animation: fade infinite 14.5s linear 0s normal forwards;
  animation-delay: 4s;
  top: 15px;
}

.text-wrapper h2 {
  animation: fadeNew infinite 14.5s linear 0s normal forwards;
  animation-delay: 7.8s;
}

.text-wrapper img {
  position: absolute;
  left: 50px;
  bottom: 30px;
  width: 468px;
  height: 180px
}

.red-wrapper {
  position: absolute;
  bottom: 0px;
  z-index: 9;
  right: -600px;
  color: #fff;
  animation: slideLeftNew 14.5s infinite ease 0s normal forwards;
  animation-delay: 7s;
  padding-left: 15px;
  border-bottom: 100px solid #E6000A;
  border-right: 50px solid transparent;
  height: 0;
  width: 120px;
}

.red-wrapper h3 {
  font-size: 1.1em;
  font-weight: 300;
  margin-top: 26px;
}

.logo img {
  width: 80px;
  height: auto;
  margin: 17px;
}

img.kitchen {
  transform: translateY(-40%);
  -webkit-transform: translateY(-40%);
  -ms-transform: translateY(-40%);
  width: 63%;
  position: absolute;
  left: -18px;
  animation: moveUp 14.5s infinite ease 0s normal forwards;
}

img.wall {
  width: 11%;
  position: absolute;
  left: 0;
  z-index: 9;
}

@keyframes slideLeft {
  20.95% {
    right: -155px
  }
  85%,
  27.19% {
    right: 135px;
  }
}

@keyframes slideLeftNew {
  15.95% {
    right: -220px
  }
  20.19%,
  37% {
    right: 0
  }
  42% {
    right: -220px;
  }
}

@keyframes fade {
  0% {
    opacity: 0
  }
  23%,
  14.38% {
    opacity: 1
  }
  26% {
    opacity: 0
  }
}

@keyframes fadeNew {
  0% {
    opacity: 0
  }
  30%,
  14.38% {
    opacity: 1
  }
  33% {
    opacity: 0
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(-40%);
  }
  50% {
    transform: translateY(-45%);
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Hawa Sliding Solutions</title>
  <meta content="text/html;charset=UTF-8" http-equiv="content-type">
</head>

<body>

  <a href="http://hawa-suono.com/" target="_blank">
    <div class="banner-wrap">
      <div class="logo"><img src="logo.png"></div>
      <div class="page-container">
        <div class="text-wrapper">
          <h1>Den Alltag auf stumm schalten.</h1>
          <h2>Hawa Suono – die schalldichte Lösung.</h2>
        </div>
        <img class="wall" src="wall.png" />
        <img class="kitchen" src="kitchen3.jpg" />
        <div class="image-wrapper"><img src="tuer2.jpg" /></div>
        <div class="red-wrapper">
          <h3>Jetzt die Weltneuheit entdecken.</h3>
        </div>
      </div>
    </div>
  </a>
</body>

</html>

现在我需要检查横幅是否已经加载并且工作，如果没有加载，则需要用另一张图片代替横幅。我尝试了很多方法，检查图像是否存在，检查CSS是否已加载，检查文档是否已加载，但是这些解决方案不能工作，因为我必须仅检查横幅是否已加载，而不是整个文档。所以现在，我卡住了，不知道下一步该怎么做。此外，我不能使用jQuery，只能使用纯JavaScript。有任何帮助吗？谢谢

- Marko Petković

横幅是哪张图片？是 logo.png 吗？ - Chris

一切都是横幅。三张图片组成了一个动画横幅。 - Marko Petković

2个回答

0

你可以使用jQuery来完成它

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

可运行的 JSFiddle：http://jsfiddle.net/kalmarsh80/nrAPk/

- Upendra Joshi

检查图像是否已加载（JavaScript中没有错误） - Upendra Joshi

投票，我唯一能看到的是最后一张图片因为src属性已经存在（这里ALERT），但加载需要更多时间而被暂停了。对于小图片来说，这不是问题，但对于较大的图片，你会在所有图片加载完成之前获得响应FINISH。 - BatOOn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hash · Accepted Answer

如果使用JS，

function imgError(image) {
    image.onerror = "";
    image.src = "/images/wall.gif";
    return true;
}

<img src="wall.png" onerror="imgError(this);"/>

没有JS，

<img src="wall.png" onError="this.onerror=null;this.src='/images/wall.gif';" />