جافا سكربت Lazy Loading تسريع

لتطبيق تقنية "Lazy Loading" في بلوجر لتحميل الصور فقط عندما يكون المستخدم قريبًا منها، يمكنك اتباع الخطوات التالية:

قم بتسجيل الدخول إلى حسابك في Blogger وانتقل إلى قسم تحرير التخطيط

انقر على "إضافة قطعة HTML/Javascript" حيث تريد تطبيق التحميل الكسول

ثم ضع الكود التالي:

<script>

document.addEventListener("DOMContentLoaded", function() {

var lazyloadImages = document.querySelectorAll("img[data-src]");

var lazyloadThrottleTimeout;

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.removeAttribute('data-src');

}

});

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>

احفظ التغييرات

هذا الكود يعمل عند تحميل الصفحة، حيث يحمل الصور التي تحتوي على خاصية data-src بدلاً من src، وعندما يتم تمرير الصور إلى مجال العرض يقوم الكود بتحميل الصور تلقائياً.

تذكر أن الكود قد يختلف بناءً على التخطيط الحالي لمدونتك، لذا قد تحتاج إلى تعديل بعض الجزئيات وفقاً لاحتياجاتك الخاصة