CODEWITHSUNDEEP
javascriptjqueryhtml
Ivan Taccadoli
Ivan Taccadoli

Reputation: 183

Multiple image loading animation not working

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

Upvotes: 2

Views: 252

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

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>

Upvotes: 3

Related Questions