Multiple image loading animation not working

user_11846328 0
Viewed 179

I have two images on my html page and i'm using jquery to check when they are fully loaded before removing the circle loader overlay (individually for each image). So at the beginning the overlay with the loader animation is shown on each pictures, and every time a picture is loaded the overlay is toggled off. But with my current code the overlay is not toggled off at all.

<div class="img" id="img1">
    <div class="image-loader">
        <div class="cssload-speeding-wheel"></div>
    </div>
</div>

<div class="img" id="img2">
    <div class="image-loader">
        <div class="cssload-speeding-wheel"></div>
    </div>
</div>

$(document).ready(function(){
    $('.img').each(function(){
        let img = $(this).css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");
        $('<img/>').attr('src', img).on('load', function() {
            $('#' + $(this).attr('id') + ' .image-loader').hide();
        });
    });
});

The code was working for a single image:

$(document).ready(function(){

    let img = $('#img1').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");
    $('<img/>').attr('src', img).on('load', function() {
        $('#img1 .image-loader').hide();
    });

});

Does anyone have a solution for this? thanks

html jquery javascript
1 Answers

this inside your load function refers to the dynamic $('<img/>') element. So $(this).attr('id') is undefined and none of the loaders disappear.

You need to store a reference before and use it as shown:

$(document).ready(function() {
  $('.img').each(function() {
    let img = $(this).css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi, "");
    let id = $(this).attr('id')
    $('<img/>').attr('src', img).on('load', function() {      
      $('#' + id + ' .image-loader').hide();
    });
  });
});
body {
  margin: 0
}

.view {
  height: 100vh;
  width: 100vw;
  background-color: blanchedalmond;
  display: grid;
  place-content: center;
}

.img {
  background-position: center center;
  background-size: cover;
  height: 50vh;
  width: 50vw;
}

#img1 {
  background-image: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73751/world.topo.bathy.200407.3x5400x2700.jpg');
}

#img2 {
  background-image: url('https://edmullen.net/test/rc.jpg');
}

.image-loader {
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.cssload-speeding-wheel {
  width: 49px;
  height: 49px;
  margin: 0 auto;
  border: 5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: cssload-spin 800ms infinite linear;
  -o-animation: cssload-spin 800ms infinite linear;
  -ms-animation: cssload-spin 800ms infinite linear;
  -webkit-animation: cssload-spin 800ms infinite linear;
  -moz-animation: cssload-spin 800ms infinite linear;
}

@keyframes cssload-spin {
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes cssload-spin {
  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-spin {
  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-spin {
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="view">

  <div class="img" id="img1">
    <div class="image-loader">
      <div class="cssload-speeding-wheel"></div>
    </div>
  </div>

  <div class="img" id="img2">
    <div class="image-loader">
      <div class="cssload-speeding-wheel"></div>
    </div>
  </div>

</div>

user_78678220
Related