图像加载后如何删除加载图标？

Question

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.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>

CSS

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

Answer 1

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.stack.imgur.com/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.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" /> </div> <div class="wrapper"> <img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" /> </div>