? ??? ???? ?????? ????? ?? : ?? ?? ??? ?? ?????.

? ??? ??? ????? ?? ??? ?????? ??? ?? ????? ????? ??? ?? ???? ?? ??? ????? ??? ? ???? ?? ??? ???? ? ????. ? ??? ???? ??? ??? ?? ??? ????? ?? ? ???? ??? ??? ??? ??? ????.

Lazy Loading? ???? ?? ??? ??? ?? JavaScript? ???? ???????. Chrome 75 ? ?? ??? ??? ? Iframes? ?????? ????? ??? ????? ?? ????? ?? ??? ??? JavaScript ???? ???????. ?? ?? ? ??? ???, ????? ? ??? ??? ?? ?? ????? ??? ?????? ??? ???? ?? ?? ????? ?? ??? ??? ???? ?? ?? ??? ??? ? ????. ??? ??? ??? ??? ?? ????? ??????.

?? ???? :

???? ??? ?? ??? ?? ??? ????.

1. HTML ?? : ?? <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174502705448368.jpg" class="lazy" alt="??? ??? ??? ????? ?">

2. ?? ?? : Intersection Observer API? ???? ???? ???? ???? ? ??? ??????. Intersection Observer ???? ?? ??? ??? ???? ?? scroll ??? ??? ??? resize .

 // ??? ???? ????
const observer = new intersectionObserver (lazyload, {
  rootmargin : '100px',
  ?? ? : 1.0
});

?? lazyload (??) {
  elements.foreach (image => {
    if (image.intersectionRatio> 0) {
      image.src = image.dataset.src;
      ??? (???);
    }
  });
}

// "Lazy"?????? ?? IMG ??? ??????. const lazyimages = document.querySelectorAll ( 'img.lazy');
LazyImages.foreach (img => {
  Observer.observe (IMG);
});

?? ? ??? :

?? ?? ???? ? ?? ??? ????.

1. JavaScript ??? : JavaScript????? ??? ??? ???? ?? ? ? ????.
2. ??? ?? : ??????? ?? ???? ???? ??? ??? ??? ? ????.

?? ??? ?? ???? ??? ?? ???????.

1. ?? ??? ?? ?? : ?? ??? ???? ????? ?? loading="lazy" ??? ????? ??? ?????. ???? ?? JavaScript ???? ?? ??????.

 if (htmlimageelement.prototype)?? '??'{
  document.querySelectorall ( 'img.lazy'). foreach (img => img.src = img.dataset.src);
} ? ?? {
  // ??? ???? ???? ?????? ??}}

2. ?? ?? ? ? ? CSS ?? : ?? ??? ?? ??? ?? ?? ? ?? ???? CSS? ???? ??? ? ??? ???? ?????? ? ? ?? ??? ???? ??? ??? ?????.

<picture>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174502705554652.jpg" class="lazy" alt="??? ??? ??? ????? ?">
</picture>

?? {?? : 100%; ???? : ???; }
?? img {?? : 100%; ?? : ?? 0.5S; }
picture.lazy img {?? : ?? (20px); }

3. ?? ? ?? : ??<picture></picture> ???<source></source> ??? ?? ? ??? ???? ??? ??? ??? ?? ??? ??? ????????.

?? ?? :

?? ????? ????? ?? ?? ?? ??? ??? ? ????.

1. HTML ??? : ??? ????? ??? ?? ?? ?? ??? ??<picture></picture> ??? ?? HTML ??.

2. ??? ?? ?? : gulp-image-resize ? ?? ??? ???? ?? ??? ??? ?? ????? ???? ??? (? : Netlify ? Cloudinary)? ???? ??? ??? ?????.

?? :

? ??? ???? ??? ????? ?? ??? ?????. ?? ??? ?? ?? ??, ?? ?? ? ?, CSS ??, ?? ? ?? ? ?? ??? ???? ??? ??? ?????? ??? ?? ? ? ????. ??? ??? ?? ?? (?? ?? ??? ??)? ???? ?? ???? ?? ? ?? ??? ?? ????. ? ??? ? ??? ?? ??? ?? ????? ? ???? ??? ??? ?? ? ? ????.

? ??? ??? ??? ??? ????? ?? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!