Check if banner is loaded

Question

Hi i Have a custom made banner with following code

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>

Now I need to check if the banner is loaded and work, and if it is not, then I need to put another image instead of the banner. I tried a lot of things, to check if image is there, to check if css is loaded, to check is the document loaded, but that solution can not work, because I must only check if the banner is loaded, not the whole document. So now, I am stacked and do not know what to do next.Also, I can not use jquery, only pure javascript. Any help? Thanks

Everything is banner. All three images make an animated banner. — Marko Petković, Oct 12 '17 at 07:31

score 1 · Answer 1 · answered Oct 12 '17 at 07:41

1

If using JS,

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

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

Without JS,

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

answered Oct 12 '17 at 07:41

Hash

7,726
9
34
53

This is a good start. But somehow I must determe if every image is loaded in banner, and if they are not then replace whole banner with one big image. – Marko Petković Oct 12 '17 at 07:54
so if one image is missing you still will replace with one big image? – Hash Oct 12 '17 at 08:07
Yes, that is what client wants. If one of the four images are missing, to replace whole banner (text and everything with one big image). – Marko Petković Oct 12 '17 at 08:13

score 0 · Answer 2 · answered Oct 12 '17 at 07:34

0

you can do it with 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');
});

working fiddle : http://jsfiddle.net/kalmarsh80/nrAPk/

answered Oct 12 '17 at 07:34

Upendra Joshi

603
6
15

reference : https://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript – Upendra Joshi Oct 12 '17 at 07:35
vote up, the only thing I can see is that the last picture is on hold with loading because the src attribute already exists (here ALERT) but loading needs more time. with small pictures, it is not a problem, but with bigger ones, you get response FINISH before all pictures are loaded. – BatOOn Oct 12 '17 at 07:38

Check if banner is loaded

2 Answers2