图片加载后如何去掉加载图标？

Question

我使用延迟加载来加载带有居中背景加载图标的图像，但我觉得没有必要在这个问题中包含延迟加载效果。我想在加载图像后删除加载图标，因为较小的图像可能不会覆盖加载图标。

我使用相同的外部 CSS 文件来加载图标。最接近的解决方案都不适合我。

任何建议和帮助将不胜感激。

超文本标记语言

<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

您可以实现onload图像事件，在其中删除类包装器作为$(".lazy").on('load', function() { $('.wrapper').removeClass('wrapper'); })更新：如果您只想删除每个图像的加载，请更改为仅删除父类。$(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>