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

【问题标题】：How do I remove the loading icon after the image is loaded?图像加载后如何删除加载图标？
【发布时间】：2020-12-08 13:55:20
【问题描述】：

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

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

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

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;
}

【问题讨论】：

对不起。我无法在我的代码中实现它。

标签： javascript jquery css

【解决方案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>

【讨论】：

您的解决方案中的问题是，当加载其中一个图像时，所有其他图像的所有加载图标都会被删除。您可以尝试添加更多图片。
我更新了答案，应该使用 $(this).parent().removeClass('wrapper');
非常感谢。我的问题现在已经解决了。