CODEWITHSUNDEEP
javascriptjquerycss
ocean
ocean

Reputation: 193

How do I remove the loading icon after the image is loaded?

I use lazy loading to load the images with the centered background loading icons, but I felt unnecessary to include the lazy loading effect in this question. I want to remove the loading icon after the image is loaded because the smaller images may not cover the loading icon.

I use the same external CSS file for loading icons. None of the closest solutions worked for me.

Any suggestions and help would be appreciated.

HTML

<div class="wrapper">
<img class="lazy" src="https://i.sstatic.net/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.sstatic.net/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>

CSS

.wrapper {
background: url(https://i.sstatic.net/yW2VY.gif) no-repeat center;
min-height: 220px;
}

Upvotes: 0

Views: 1494

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18973

You can implement onload event of image, inside it remove class wrapper as

$(".lazy").on('load', function() { $('.wrapper').removeClass('wrapper'); })

Update: if you want to remove only loading for each image change to remove parent class only.

$(this).parent().removeClass('wrapper');


$(".lazy").on('load', function() { $(this).parent().removeClass('wrapper'); })
.wrapper {
background: url(https://i.sstatic.net/yW2VY.gif) no-repeat center;
min-height: 220px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<img class="lazy" src="https://i.sstatic.net/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.sstatic.net/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>

Upvotes: 1

Related Questions