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

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>