بارگذاری تنبل تصاویر برای سرعت بخشیدن به بارگذاری صفحه وب

تصاویر را می توان به روش های مختلف در یک صفحه وب نمایش داد، تصاویر HTML به عنوان عناصر CSS یا تصاویر پس زمینه قرار می گیرند. در این مقاله یاد می گیریم که چگونه هر دو نوع تصویر را به عنوان بار تنبل بارگذاری کنیم.

تصاویر جاسازی شده

رایج ترین گزینه های بارگذاری تنبل، تصاویری هستند که در آنها استفاده می شود عناصر. برای تصاویر جاسازی شده(در یک ردیف) ما سه گزینه بارگیری تنبل داریم که گاهی اوقات می‌توان از آنها برای سازگاری بین مرورگرها استفاده کرد:

از بارگذاری تنبل تصاویر در سطح مرورگر استفاده کنید

کروم و فایرفاکس دارای بارگذاری تنبل تصاویر هستند loading آنها پشتیبانی می کنند این ویژگی را می توان به موارد اضافه کرد <img> و همچنین به عناصر <iframe> اضافه. ویژگی lazy به مرورگر می‌گوید که اگر تصویر در پنجره کاربر است فوراً آن را بارگذاری کند و تا زمانی که کاربر به آنها نزدیک نشود، سایر تصاویر را بارگذاری نکند.

مقاله: بارگذاری تنبل تصاویر در سطح مرورگر

توجه: <iframe loading="lazy"> در حال حاضر یک استاندارد نیست، اگرچه در Chromium پیاده سازی شده است، اما هنوز توسط نهادهای اصلی استاندارد ایجاد نشده است. پیشنهاد می‌کنیم تا زمانی که iframe‌ها تثبیت و استاندارد نشده‌اند از بارگذاری کند خودداری کنید.

برای دیدن جزئیات در مورد پشتیبانی مرورگر از بارگذاری تنبل تصاویر، بخش سازگاری مرورگر را در مرجع MDN ببینید. اگر مرورگر از بارگذاری تاخیری پشتیبانی نمی کند، این ویژگی نادیده گرفته می شود و تصاویر بلافاصله طبق معمول بارگیری می شوند.

برای اکثر وب سایت ها، افزودن این ویژگی به تصاویر تعبیه شده سرعت و عملکرد سایت را بهبود می بخشد و باعث صرفه جویی در هزینه و زمان بارگذاری تصاویر کاربران می شود که ممکن است هرگز اسکرول نکنند. اگر تصاویر زیادی دارید و می خواهید مطمئن شوید که همه کاربران (حتی کسانی که مرورگر آنها از بارگذاری تاخیری تصویر پشتیبانی نمی کند) می توانند به خوبی از تصاویر استفاده کنند، باید از ترکیبی از این روش ها استفاده کنید.

بارگذاری تنبل تصاویر با استفاده از Intersection Observer

برای تکمیل بارگذاری معوق مورد <img> ، ما از جاوا اسکریپت برای بررسی اینکه آیا آنها در ویوپورت هستند یا نه استفاده می کنیم. ویژگی ها، در صورت وجود src (و گاهی srcset) آنها با URL های محتوای تصویر مورد نظر پر شده اند.

اگر قبلاً کد بارگذاری تنبلی نوشته‌اید، ممکن است کار خود را با استفاده از کنترل‌کننده‌های رویداد انجام داده باشید scroll یا تغییر اندازه (resize) انجام داده اند. در حالی که این رویکرد در بین مرورگرها سازگارتر است، مرورگرهای مدرن روش کارآمدتر و موثرتری را برای انجام کار بررسی قابلیت مشاهده عناصر از طریق Intersection Observer API ترجیح می دهند. حاضر.

Intersection Observer در همه مرورگرها، به خصوص IE11 و قدیمی تر، پشتیبانی نمی شود. اگر سازگاری بین مرورگرها مهم است، حتماً بخش بعدی را بخوانید که به شما نشان می‌دهد چگونه با استفاده از کنترل‌کننده رویداد، تصاویر را آهسته‌تر (اما سازگارتر!) بارگیری کنید.

پشتیبانی از ناظر تقاطع

دسکتاپ

کروم	فایرفاکس	IE	لبه، پایان	سافاری
58	55	خیر	16	12.1

موبایل و تبلت

اندروید کروم	فایرفاکس اندروید	مرورگر اندروید	سافاری iOS
98	96	98	12.2-12.5

استفاده و خواندن از Intersection Observer نسبت به نوشتن کد سفارشی با تکیه بر کنترل کننده های رویداد آسان تر است، زیرا شما فقط باید یک ناظر را برای مشاهده عناصر به جای نوشتن کد خسته کننده برای شناسایی عناصر ثبت کنید. تنها کاری که باید انجام دهید این است که تصمیم بگیرید وقتی یک عنصر قابل مشاهده است چه کاری انجام دهید. بیایید این الگوی نشانه گذاری عنصر اصلی را ببینیم <img> شما که بار تنبلی دارید، بیایید تلاش کنیم.

<img class="lazy" src=" data-src="image-to-lazy-load-1x.jpg" data-srcset=" 2x,  1x" alt="I'm an image!">

در مورد کد html فوق، سه نکته قابل توجه است:

• ویژگی classچیزی است که یک عنصر را با آن در جاوا اسکریپت انتخاب می کنید.
• ویژگی srcکه به تصویر ظرفی اشاره دارد که هنگام بارگذاری صفحه برای اولین بار ظاهر می شود.
• مشخصه data-src و data-srcsetکدام ویژگی های کانتینر حاوی URL برای تصویری است که پس از قرار دادن عنصر در viewport بارگذاری می کنید.

اکنون، با استفاده از Intersection Observer در جاوا اسکریپت، تصویر html بالا را با تنبلی بارگذاری می کنیم:

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = ().slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});

در رویداد DOMContentLoaded صفحه، برای همه تصاویری که کلاس آنها تنبل است، یک مشاهده گر جدید ایجاد می کنیم تا زمانی که عناصر img.lazy وارد نمای کاربر می شوند، تصویر اصلی جایگزین تصویر مکان نگهدار شود.

Intersection Observer در تمام مرورگرهای مدرن پشتیبانی می شود. بنابراین استفاده از آن تضمین می کند که بارگذاری تنبل برای اکثر بازدیدکنندگان در دسترس خواهد بود.البته این قابلیت در اینترنت اکسپلورر وجود ندارد و اگر پشتیبانی از اینترنت اکسپلورر برای شما مهم است از این روش صرف نظر کنید.

استفاده از کنترل کننده رویداد برای بارگذاری آهسته تصاویر

اگر برخی از کاربران شما از Intersection Observer پشتیبانی نمی کنند، می توانید علاوه بر استفاده از Intersection Observer برای مرورگرهای مدرن، از کنترل کننده رویداد برای مرورگرهای قدیمی استفاده کنید. شما می توانید با استفاده از رویدادهای اسکرول، تغییر اندازه و غیره تعیین کنید که آیا یک عنصر در viewport است یا خیر. و سپس تصویر اصلی را بارگذاری کنید.

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = ().slice.call(document.querySelectorAll("img.lazy"));
  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.srcset = lazyImage.dataset.srcset;
            lazyImage.classList.remove("lazy");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

کد بالا تقریباً در همه مرورگرها کار می کند، اما به دلیل تماس های مکرر setTimeout اگر هدف ما از بارگذاری تنبل افزایش سرعت بارگذاری اولیه صفحه باشد، این امر باعث بروز مشکلاتی در سرعت صفحه می شود، در صفحاتی که تصاویر زیادی از این روش استفاده می کنند نتیجه معکوس خواهند داشت و فراخوانی مکرر کدها باعث کاهش سرعت صفحه می شود.

به زبان ساده: تا حد امکان از بارگذاری تنبل با Intersection Observer استفاده کنید و فقط در صورتی از کنترل کننده رویداد استفاده کنید که سازگاری بین مرورگرها کاملاً ضروری باشد.

کتابخانه هایی برای بارگذاری تنبل تصاویر

از کتابخانه های زیر می توان برای بارگذاری تنبل تصاویر استفاده کرد.

• lazysizes یک کتابخانه عکس با قابلیت بارگذاری تنبل است که می‌تواند علاوه بر تصاویر، فریم‌های درون خطی را نیز بارگذاری کند. مدلی که از این کتابخانه استفاده می کند کاملاً شبیه به مثال کد بالا است زیرا به طور خودکار به کلاس lazyload در عناصر و مستلزم آن است که URL های تصویر را در ویژگی های data-src و/یا data-srcset مشخص کنید. که محتویات آن به ترتیب با ویژگی های src و/یا srcset مبادله می شود.
• vanilla-lazyload یک گزینه سبک وزن برای بارگذاری آهسته تصاویر، تصاویر پس زمینه، فیلم ها، فریم های درون خطی و اسکریپت ها است. vanilla-lazyload همچنین از Intersection Observer استفاده می‌کند، از تصاویر واکنش‌گرا پشتیبانی می‌کند و اجازه بارگذاری تنبل را در سطح مرورگر می‌دهد.
• lozad.js یکی دیگر از گزینه های سبک وزن است که فقط از Intersection Observer استفاده می کند. در این راه بسیار موثر است.
• yall.js کتابخانه ای است که از Intersection Observer استفاده می کند و کنترل کننده رویداد را برمی گرداند. این کتابخانه با IE11 و مرورگرهای اصلی سازگار است.
• اگر به یک کتابخانه خاص React Lazy loading نیاز دارید، react-lazyload می تواند کمک کند. این ابزار از Intersection Observer استفاده نمی کند، اما یک روش آشنا برای بارگذاری تنبل تصاویر برای کسانی که به توسعه برنامه ها با React عادت دارند ارائه می دهد.