بارگذاری تصاویر قابل‌مشاهده

بیایید فرض کنیم یک کلاینت که سرعت پایینی دارد داریم و می‌خواهیم ترافیک موبایل آن را ذخیره کنیم.

برای این کار ما تصمیم می‌گیریم بلافاصله تصاویر را نمایش ندهیم اما درعوض جای آن را با placeholderها پر کنیم مانند این:

<img src="placeholder.svg" width="128" height="128" data-src="real.jpg">

پس در ابتدا تمام تصاویر placeholder.svg هستند. هنگامی که صفحه به موقعیتی کاربر می‌تواند تصویر را ببیند اسکرول شد ما src را به آن data-src تغییر می‌دهیم و تصویر بارگذاری می‌شود.

اینجا در iframe یک مثال است:

اسکرول کنید تا تصویر بارگذاری شود.

الزامات:

هنگامی که صفحه بارگذاری می‌شود تصاویری که روی صفحه هستند بدون هیچ اسکرولی بلافاصله باید بارگذاری شوند.
برخی تصاویر ممکن است عادی و بدون data-src باشند. کد نباید آنها را تحت تاثیر قرار دهد.
وقتی تصویری بارگذاری شد نباید با اسکرول مجدد دوباره تصویر بارگذاری شود.

اگر می‌توانید پاسخ پیشرفته‌تری ایجاد کنید که تصاویری که در پایین/بعد از موقعیت فعلی هستند از قبل بارگذاری شوند.

.فقط اسکرول عمودی پیاده شود نه اسکرول افقی

باز کردن یک sandbox برای تمرین.

The onscroll handler should check which images are visible and show them.

We also want to run it when the page loads, to detect immediately visible images and load them.

The code should execute when the document is loaded, so that it has access to its content.

Or put it at the <body> bottom:

          // ...the page content is above...

function isVisible(elem) {

  let coords = elem.getBoundingClientRect();

  let windowHeight = document.documentElement.clientHeight;

  // top elem edge is visible?
  let topVisible = coords.top > 0 && coords.top < windowHeight;

  // bottom elem edge is visible?
  let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;

  return topVisible || bottomVisible;
}

The showVisible() function uses the visibility check, implemented by isVisible(), to load visible images:

          function showVisible() {
  for (let img of document.querySelectorAll('img')) {
    let realSrc = img.dataset.src;
    if (!realSrc) continue;

    if (isVisible(img)) {
      img.src = realSrc;
      img.dataset.src = '';
    }
  }
}

showVisible();
window.onscroll = showVisible;
        

P.S. The solution also has a variant of isVisible that “preloads” images that are within 1 page above/below the current document scroll.

باز کردن راه‌حل درون sandbox.