یکی از مهمترین ویژگی ها در طراحی سایت سرعت Load شدن آن سایت هست . برای اینکه سایت شما بازدید خوبی داشته باشه ملاک های بسیار زیادی وجود داره که با انجام دادن میتونید به بازدید بالا دست پیدا کنید که بعضی از آنها از اولویت بالاتری دارند. توی این مقاله میخوام در مورد Lazy Load برای تمامی عکس های سایت شما بدون استفاده از JQuery و با یک روش بسیار ساده و کاربردی توضیح بدم پس با من همراه باشید...
یکی از مزیت های بسیار خوب Lazy Load اینه که اگر سایت شما مثلا 20 عکس داشته باشه ، این قابلیت باعث میشه که با ورود به سایت فقط عکس هایی نمایش داده بشن که در مقابل دید شما (به اندازه تصویر مانیتور شما) قرار دارند و از لود شدن عکس هایی که در بخش های پایین تر قرار دارن جلوگیری میکنه تا زمانی که به اون بخش اسکرول نکردید !! و هر بار که به قسمت هایی پایینتر اسکرول میکنید عکس ها به صورت خودکار لود میشن و به کاربر نمایش داده میشن .
اینکار برای بالابردن سرعت سایت شما، حافظه کش و ... کاربرد بسیار بالایی داره . نمونه ای از Lazy load رو میتونید از سایت توسعه پردازان مشاهده کنید.
تمامی تگ های Img که در سایت شما استفاده شده را پیدا کنید و کلاس Lazy رو بهش اضافه کنید.
<img src="/image/sample.jpg" class="lazy" />
بعد از افزودن کلاس lazy باید کلمه src که درون تگ Img استفاده شده رو به data-src تغییر بدید.
<img data-src="/image/sample.jpg" class="lazy" />
در پایین صفحه قبل از بسته شدن تگ body باید تگ Script باز کنید و کدهای مربوط به Lazy Load رو قرار بدید .
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages;
if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".lazy");
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy");
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(".lazy");
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}
})
</script>
در واقع این کد تمام Element هایی که کلاس Lazy براشون نوشته شده رو پیدا میکنه و قابلیت Lazy Load رو پیاده میکنه.
امیدوارم که این مقاله براتون مفید باشه .
