Question

您好我有一个带有以下代码的自定义横幅

＆＃13;

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%);
  }
}

＆＃13;

<!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>

＆＃13;

现在我需要检查横幅是否已加载并正常工作，如果不是，则需要放置另一个图像而不是横幅。我尝试了很多东西，检查图像是否存在，检查是否加载了css，检查是否加载了文档，但该解决方案无法正常工作，因为我只能检查横幅是否已加载，而不是整个文档。所以现在，我已经堆叠，不知道下一步该做什么。而且，我不能使用jquery，只能使用纯javascript。有帮助吗？感谢

Answer 1

如果使用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';" />

Answer 2

你可以用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');
});

工作小提琴：http://jsfiddle.net/kalmarsh80/nrAPk/

检查横幅是否已加载

2 个答案: