الرئيسية : » » جافا سكربت Lazy Loading تسريع

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

الكاتب : السفراني التاريخ : الخميس، 30 مايو 2024 | مايو 30, 2024

مشاهدات الان

لتطبيق تقنية "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، وعندما يتم تمرير الصور إلى مجال العرض يقوم الكود بتحميل الصور تلقائياً.
تذكر أن الكود قد يختلف بناءً على التخطيط الحالي لمدونتك، لذا قد تحتاج إلى تعديل بعض الجزئيات وفقاً لاحتياجاتك الخاصة

SHARE

نبذه عن المدونه : السفراني

0 التعليقات : :

إرسال تعليق