Блог

Я использую отложенную загрузку для загрузки изображений с центрированными значками фоновой загрузки, но я счел ненужным включать эффект отложенной загрузки в этот вопрос. Я хочу удалить значок загрузки после загрузки изображения, потому что меньшие изображения могут не закрывать значок загрузки.

Я использую тот же внешний 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;
}
 

Вы можете реализовать 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>