Ленивая загрузка изображений без изменения существующего атрибута `src` (без изменения HTML)? - PullRequest
Новая
       16

Ленивая загрузка изображений без изменения существующего атрибута `src` (без изменения HTML)?

1 голос
/ 18 марта 2019

Из-за ограничений нам нужно отображать HTML-контент из другого сервиса, изображения которого являются просто типичными <img src="http://example.com/image.jpg"/>

Большинство из ленивых загрузочных библиотек (например, lozad.js ) предлагаютудаление атрибута src и добавление data-src в противном случае браузер немедленно загрузит каждое изображение.

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

Есть ли какая-либо техника для достижения отложенной загрузки, не касаясь HTML?

1 Ответ

0 голосов
/ 18 марта 2019

Если вы внедряете html-фрагмент элемента изображения, вы можете поместить его в промежуток и позже манипулировать html.

Например: 

<div id="topNav">
    <span class="unloaded">
      <noscript>
        <img src="https://www.jpl.nasa.gov/images/universe/20170802/heliophysics-16.jpg">
      </noscript>
    </span>
    <div class="heightTest">
    </div>
    <span class="unloaded">
      <noscript>
        <img src="https://www.jpl.nasa.gov/images/universe/20170802/heliophysics-16.jpg">
      </noscript>
    </span>
  </div>

Тогда смотрите с помощью JavaScript: 

function isElementInViewport (el) {
      var rect = el.getBoundingClientRect();
      return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
  }


  var images = document.getElementsByClassName('unloaded');
  function checkImages() {
    var clean = false;
    for(var i=0; i<images.length;i++){
      var el = images[i];
      if(isElementInViewport(el)){
        //replace the span's innerhtml with the noscript innerhtml.
        el.innerHTML = el.childNodes[1].innerHTML;
        //remove the class, since it's now loaded.
        el.classList.remove("unloaded");
        //we changed at least one element, so we'll want to get a new clean list.
        clean = true;
      }
    }

    if(clean == true){
      images = document.getElementsByClassName('unloaded');
    }
  }
  checkImages();
  window.addEventListener('scroll', checkImages, false);

Таким образом, вы ждете, пока событие не изменит любой HTML. Преимущество здесь в том, что если javascript не работает, изображения будут загружаться в любом случае. Кроме того, поскольку это диапазон, вы можете установить размер и фон для серого значка загрузки через css для класса диапазона «unloaded».

...