Ленивая загрузка фоновых изображений - PullRequest
Новая
       9

Ленивая загрузка фоновых изображений

0 голосов
/ 25 марта 2020

Я пытаюсь лениво загрузить фоновое изображение. Для этого я добавил плагин для отложенной загрузки jquery: jquery -lazy. Мы устанавливаем его с npm i jquery-lazy.

Для того, чтобы иметь lazyloaded изображения, мне просто нужно добавить класс lazy, как показано ниже:

<img data-src="image.png" class="lazy"> с js ниже: 

<script>
  $(function($) {
    $("img.lazy").Lazy();
});
</script>

И он работает правильно.

К сожалению, я не знаю, как сделать для фоновых изображений, как это: 

<div style="background-image: url(background.jpg)">

Действительно здесь фоновое изображение добавляется в <div> в поле стиля ...

Мне интересно, могу ли я лениво загрузить фоновое изображение так же, как я делал с базовыми c изображениями, такими как <img>. Я попытался сделать это, добавив <div class="lazy">, но он не работает.

1 Ответ

0 голосов
/ 25 марта 2020

Вы можете использовать jquery -lazy для любых тегов html: 

<div class="lazy" style="display: block; background-image: url('http://jquery.eisbehr.de/lazy/images/3.jpg?t=1585165700');"></div>

$(function() {
    $('.lazy').lazy();
});

См. Пример на сайте (пример содержит неверную вкладку html, но вы можете увидеть источник на странице): http://jquery.eisbehr.de/lazy/example_load-background-images

...