التحميل الكسول lazy-loading للصور بدون مكتبات javascript

فيصل الوهباني الثلاثاء, مارس 03, 2020

Follow @hololltech Tweet

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

للتغلب على هذه المشكلة يلجأ معظم أصحاب المواقع لإضافة مكتبات javascript خارجية للتعامل مع عرض الصور على الشاشة  والذي يسمى التحميل الكسول load lazy للصور والأطارات بشكل عام (راجع الموضوع التالي ).

لكن ماذا لوكانت هذه الميزة قادمة للمتصفحات دون إضافة أكواد خارجية للتعامل مع تأجيل تحميل الصور خارج الشاشة.
 نعم في الإصدارات الحديثة من المتصفحات، فمثلا متصفح كروم أصبح يدعم هذه الميزة بداءأً من الإصدار Chrome 75 ، حيث يدعم إضافة خاصية "loading="lazy  والتي تعمل على جعل المتصفح يتعامل مع الصور المضاف لها هذه الخاصية بما يسمى بالتحميل الكسول وتأجيل تحميل الصور التى لا توجد في شاشة العرض ولا كن تعرض عندما يقوم المستخدم بالتمرير عند الحاجة  لعرضها جرب هذا المثال  demo  المقدم من موقع web.dev للتعرف على كيفية عمل خاصية "loading="lazy.

يتم إضافة الخاصية "loading="lazy  لـ <img> و <iframe> بالطريقة التالية :

<img src="1.jpg" loading="lazy" alt="..." />

 <iframe src="video1.html" loading="lazy"></iframe>

تستقبل خاصية  loading ثلاث قيم  وهي :

• lazy: وهي القيمة الأفضل للتحميل الكسول
• eager: والتي تعني التحميل بشكل فوري وتعتبر هذه الخاصية غير مثالية.
• auto: وهي الخاصية التلقائية والتى تعتمد على المتصفح بحيث يقوم بالتحميل الكسول أو لا.

الأن جميع المتصفحات الحديثة ستقوم بدعم هذه الخاصية ولاكن ماذ لوكان المتصفح لا يدعم هذه الخاصية؟

سنحتاج لكود بسيط يقوم بإختبار دعم المتصفح لخاصية loading lazy وإذا كان المتصفح لا يدعم هذه الخاصية يتم جلب مكتبة خارجية للتحميل الكسول بالشكل التالي :

<script>
    if ('loading'  in HTMLImageElement.prototype) 
          // المتصفح يدعم التحميل الكسول  
      }
    else {
        // تحميل المكتبة الخارجية للتحميل الكسول اذا كان المتصفح لا يدعم الخاصة 
      } 
</script>

سنقوم بإستخدام مكتبة lazysizes والتى تعمل إضافة خاصية التحميل الكسول وتأجيل الصور خارج شاشة العرض .

إذا سيكون الكود  الذي يقوم بإختبار دعم المتصفح لخاصية التحميل الكسول وإذا لم يكن يدعمها  سيقوم بجلب مكتبة lazysizes بشكل تلقائي حسب دعم المتصفح :

<script>
    if ('loading' in HTMLImageElement.prototype) {
       const images = document.querySelectorAll("img.lazyload");
       images.forEach(img => { img.src = img.dataset.src; });
     }
    else {
    // جلب المكتبة الخارجية بكشل تلقائي إذا لم يكن المتصف يدعم خاصية التحميل الكسول  
       let script = document.createElement("script");
       script.async = true;
       script.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js";
       document.body.appendChild(script); } 
</script>

 الأن سنقوم بشرح طريقة إضافة ميزة التحميل الكسول "loading="lazy لمدونات بلوجر.

• قبل التعديل قم بعمل نسخة إحتياطة للقالب تفاديا لحدوث آي مشكلة
•  بعد الدخول على بلوجر ومن ثم المظهر وثم تحرير Html.
• ابحث عن وسم الصور  <img>  وقم بإضافة خاصية loading="lazy لوسم صور المواضيع ( يختلف ايجاد  وسم الصور <img> حسب القالب الذي معك ) <...."img loading="lazy>
• ابحث عن وسم </body> وألصق كود الجافا السابق فوقه مباشرة.
• قم بحفظ التعديل.