خاصية تأخير تحميل الصور Lazy Load أصبحت غاية في السهولة

خاصية تأخير تحميل الصور Lazy Load أصبحت غاية في السهولة

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

لماذا لا يوجد شروحات حول تلك الخاصية سابقاً في كن مدون؟
هذه الخاصة لها سنوات طويلة وكانت معتمده على اضافات JavaScript وكانت مشكلتها انها لا تنجح مع معظم القوالب اضافة قد يكون ما تعتمد من ملفات أكبر حتى من حجم الصور التي سيتم اخفائها فكانت في رأيي عبئ كبير ويصعب إيجاد إضافة واحده فعالة تعمل مع الجميع
ماذا تغير الآن ؟
اصبحت الآن الإضافة جزء من تجربة الويب وأصبحت سطر بسيط جداً لأن أغلب المتصفحات بدأت اعتمادها كجزء برمجي متعارف عليه فلم يعد هناك داعي لكتابة اكواد ووضع مكتبات جافا سكريبت كبيرة الخ
كيف يمكن ان نستخدمها؟
هذا هو الكود الطبيعي للصور
<img   src="Image.jpg"   loading="lazy"  />
الجزء المعلم بالأحمر هو فقط ما تضيفه لصورك لا اكثر من ذلك ومعظم المتصفحات اصبحت تدعمها والمتصفح الذي لا يدعمها لا تسبب مشكلة معه لانها ليست كالإضافات السابقة التي ان لم يدعمها المتصفح لا تظهر الصور أصلاً لكن هذه لو لم يدعمها المتصفح ما تزال الصور ستظهر لكن دفعة واحده فهي فائدة بدون ضرر
طبقها على مواضيعك التي تحتوي صور كثيرة سيسرع هذا المواضيع
سؤال يطرح نفسه هل هناك وسيلة لتطبيقها مرة واحده على كل الصور؟
الإجابة ستعود مرة أخرى لنظام مكتبات الجفاسكريت والتي لم افضلها من الأصل


هناك 17 تعليقًا:

  1. شكرا لك أستاذ
    موضوع مميز كعادتك ♥

    ردحذف
    الردود
    1. تسلم يا غالي , مرورك وتعليقك أصبح جزء من المواضيع
      فلا تحرمنا منه , تحياتي لك ♥♥♥

      حذف
  2. الف شكر لك علي هذا الموضوع الرائع وهي فعلاً اضافة جميلة جداَ وانا استخدمها حاليا علي مدونتي فهي تسرع التحميل للقالب وكذلك تؤدي الي السماح لاعلانات ادسنس بالظهور بصورة طبيعية لان المحتوي يتحميل تحميله جزئياَ وليس دفعة واحدة خالص ودي وتقديري لمدونة (كن مدون ) التي استفدت منها الكثير ومانذال نتعلم منكم اخ عمرو فلا تحرمنا من مثل هذة المشاركات الرائعة .

    ردحذف
    الردود
    1. أشكرك أخي موسى على المرور الكريم اسعدني مرورك

      حذف
    2. بارك الله فيكم.
      كيف نستفيد منها في القوالب.؟

      حذف
    3. وفيكم بارك الله
      لو تستطيع تحديد اكواد صور المواضيع وصور الإضافات في قالبك اضف لها الكود فقط

      حذف
  3. استاذى الفاضل
    لدى استفسار
    كيف لى ان اخفى صورة الموضوع من داخل الموضوع ولكن تكن ظاهره خارج الموضوع
    محتوى المدونة الخاص بى خاص بقنوات البث المباشر وعند جعل الصورة اخر الموضوع تظهر صورة القناة فى الخارج وعند تصغيرها جدا تظهر بدرجة نقاء غير جيدة فهل من طريقة من فضلك ؟

    ردحذف
    الردود
    1. أضف للصورة هذا الكود
      style="display:none;"
      بنفس الطريقة التي يضاف بها الكود الذي بالأعلى وستكون مخفية داخل الموضوع وظاهره خارجه بإذن الله
      ملحوظة بعض القوالب طريقة تصميمها لا ينفع معها هذا الحل وهذا بسبب طريقة التكويد نفسها

      حذف
    2. اين اضف الكود بالضبط ؟

      حذف
    3. تم نجاح الطريقة
      بارك الله فيك استاذى الفاضل لا شكر يصف شخصك الكريم
      تحياتى وتقديرى لك

      حذف
    4. وفيك بارك الله أخي محمود والعفو يا طيب
      بالتوفيق أخي الكريم

      حذف
  4. شكرا على كل ماتقدمه لنا

    ردحذف
    الردود
    1. العفو أخي احمد سررت بمروك يا طيب وعوداً حميداً

      حذف
  5. ممكن اخي تشرح اكثر اين اضع الكود بالضبط انا مبتدئة ولم افهم جيدا

    ردحذف
    الردود
    1. مرحباً بك اختي كل صورة تضيفيها في بلوجر سواء في القالب او في موضوع الكود الخاص بها يبدأ بهذا الشكل
      <img
      وينتهي بكود اغلاق بهذا الشكل
      />
      انت ستضيفي الكود الأحمر قبل كود اغلاق الصورة فقط سواء كانت في موضوع او في القالب

      حذف
    2. شكرا اخي على الرد وتوضيح جزاك الله خير

      حذف
    3. العفو أختي وجزيتم بالمثل , سررت بمرورك

      حذف

نسعد بتعليقاتكم ومروركم
يرجى أن يكون التعليق في اطار الموضوع اى اسئلة أو تعليق يخص موضوع آخر او سؤال خارجي نعتذر عن عدم القدرة للرد عليه

جميع الحقوق محفوظة لــ كن مدون