Отложенная (ленивая) загрузка фоновых изображений? - PullRequest
Новая
       5

Отложенная (ленивая) загрузка фоновых изображений?

0 голосов
/ 02 мая 2018

Я использую простой скрипт для отложенной загрузки всех изображений на странице; путь к источникам изображений содержится в атрибуте data-src, а затем помещается в фактический атрибут src тега (ов) img. В значительной степени, как работает большинство (?) Реализаций метода отложенной загрузки.

Вот сценарий: 

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
    img.removeAttribute('data-src');
  };
});

Я бы хотел использовать тот же скрипт для отложенной загрузки фоновых изображений. Как мне изменить его так, чтобы атрибут data-src оказался в значении url свойства div background-image?

Я попробовал следующее безрезультатно, потому что скрипт не распознает background-image как свойство: 

[].forEach.call(document.querySelectorAll('div[data-src]'), function(div) {
  div.setAttribute('background-image', div.getAttribute('data-src'));
  div.onload = function() {
    div.removeAttribute('data-src');
  };
});

Ответы [ 2 ]

0 голосов
/ 02 мая 2018 
[].forEach.call(document.querySelectorAll('div[data-src]'), function(div) {
  div.style.backgroundImage="url('" + div.getAttribute('data-src') + "')";
  div.onload = function() {
    div.removeAttribute('data-src');
  };
});

Попробуйте это

0 голосов
/ 02 мая 2018

Проблема может быть с фоновым изображением в качестве атрибута. Вы пытались установить стиль с фоновым изображением? 

[].forEach.call(document.querySelectorAll('div[data-src]'), function(div) {
  div.setAttribute("style","background-image: url(" + div.getAttribute('data-src') + ");");
  div.onload = function() {
    div.removeAttribute('data-src');
  };
});
...