كود تحميل صور بلوجر أسرع لزيادة السرعة

للحصول علي سرعة أفضل في مدونة بلوجر يمكنك إضافة كود يقوم بتسريع تحميل الصفحة عبر تحميل الصور بعد الصفحة وعند النزول لها يتم إظهار الصورة.

كيف فعل ذلك ؟

1. أولا قم بلدخول إلي قالب بلوجر علي واجهة تعديل أكواد HTML ثم أبحث عن
2. ثانيا قم بإضافة Class جديد داخل img وأيضا قم بتغير Src إلي كود أخر وبلطبع ستفعل هذا أكثر من مرة مع كل الذي تبحث عنة مثال كامل :
3. 

ثالثا قم بوضع أبحث عن التاج body وضع فوقة

ثم أسفل التاج /body قم بإضافة 

قم بإضافة كود جافاسكريبت التالي فوق /body
<script> let images = [...document.querySelectorAll('.lazy-image')]; const interactSettings = { // Yehia Online (C) 2020 }; function onIntersection(imageEntites) { imageEntites.forEach(image => { if (image.isIntersecting) { observer.unobserve(image.target); image.target.src = image.target.dataset.src; image.target.onload = () => image.target.classList.add('loaded'); } }); } let observer = new IntersectionObserver(onIntersection, interactSettings); images.forEach(image => observer.observe(image)); </script>
رابعا قم بوضع كود Css التالي فوق /head
<style> .gallery { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 200px; grid-gap: 10px; padding: 10px; } .gallery .image { grid-area: span 1/span 1; } .gallery .image--horizontal { grid-area: span 1/span 2; } .gallery .image--vertical { grid-area: span 2/span 1; } .gallery .image--big { grid-area: span 2/span 2; } @media (max-width: 400px) { .gallery .image--horizontal, .gallery .image--vertical, .gallery .image--big { grid-area: span 1/span 1; } } .gallery img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 3px; background-color: #333; } .gallery img.lazy-image { opacity: 0.1; will-change: opacity; -webkit-transition: all 0.3s; transition: all 0.3s; } .gallery img.lazy-image.loaded { opacity: 1; } </style>
تساعد الأكواد السابقة علي تسريع مدونة بلوجر عبر تحميل وإظهار الصورة في حالة النزول لها بشكل مخصص ليشاهدها وليس تحميل كل الصور دفعة واحدة وذلك يجعل سرعة المدونة أفضل عند فحصها في مواقع إختبار سرعة الموقع.