كسول تحميل الصور مع أدوات المتصفح

يقول مؤلف المادة ، التي نُنشر ترجمتها اليوم ، Eddie Osmani من Google ، أنه في Chrome 75 بالفعل قد يتم دعم السمة الجديدة لعناصر التحميل <img> و <iframe> . هذا يعني أن هذه العناصر ستدعم الميزات القياسية لما يسمى "التحميل البطيء" للبيانات.


إذا كنت حريصًا على معرفة كيف يبدو استخدام السمة الجديدة في الكود ، فقم بإلقاء نظرة على هذا المثال:

 <img align="center" src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> 

الآن سنتحدث عن كيفية عمل سمة loading .

معلومات أولية

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

تاريخياً ، من أجل الحد من التأثير على وقت تحميل صفحات الصور الموجودة خارج المنطقة المرئية للصفحات ، كان على المبرمجين استخدام مكتبات JavaScript (مثل LazySizes ). تسمح لك هذه المكتبات بتأخير تحميل مثل هذه الصور حتى اللحظة التي لا يقترب فيها المستخدم ، أثناء التمرير خلال الصفحة ، بدرجة كافية.


تحميل الصفحة 211 صورة. يقوم إصدار الصفحة الذي لا يُستخدم لإنشاء تحميل الصور البطيئة بتحميل 10 ميغابايت من بيانات الرسوم على الفور. نفس الصفحة التي تستخدم التحميل البطيء (باستخدام LazySizes) يتم تحميلها مسبقًا بمقدار 250 كيلوبايت فقط من معلومات الرسومات. يتم تحميل كل شيء آخر عندما يتحرك المستخدم على الصفحة. يمكن الاطلاع على تفاصيل هذه التجربة على webpagetest.org .

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

تحميل السمة

تسمح سمة loading للمستعرض بتأخير تحميل محتويات عنصري <img> و <iframe> خارج المنطقة المرئية من الصفحة حتى يقوم المستخدم بالتمرير في الصفحة بالقرب من هذه العناصر. تدعم هذه السمة ثلاث قيم:

• lazy : يشير إلى المواد التي تعتبر مرشحا جيدا للتحميل كسول.
• eager : يجب تحميل المواد الموجودة في العناصر التي لها قيمة السمة هذه على الفور.
• auto : سيقرر المتصفح ما إذا كان سيتم تطبيق التحميل البطيء على المواد ذات قيمة السمة هذه.

إذا لم تحدد قيمة سمة loading ، فسيكون ذلك مكافئًا لتعيينها إلى auto .


حاليًا ، توجد سمة التحميل لعنصر <img> و <الإطار> تحت معيار HTML

أمثلة

تعمل سمة loading مع عناصر <img> (بما في ذلك سمة srcset وداخل عنصر <picture> ) ، وكذلك مع عناصر <iframe> .

 <!--    ,      ,   ,         --> <img align="center" src="unicorn.jpg" loading="lazy" alt=".."/> <!--    ,    --> <img align="center" src="unicorn.jpg" loading="eager" alt=".."/> <!--   ,        ,   --> <img align="center" src="unicorn.jpg" loading="auto" alt=".."/> <!--      <picture>.      <img>,    <picture>   srcset     --> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img align="center" src="fallback.jpg" loading="lazy"> </picture> <!--    ,     srcset --> <img align="center" src="small.jpg"    srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"    sizes="(min-width: 36em) 33.3vw, 100vw"    alt="A rad wolf" loading="lazy"> <!--      <iframe>   ,     ,          --> <iframe src="video-player.html" loading="lazy"></iframe> 

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

يرجى ملاحظة أنني اقترحت أن يتم تسمية السمة المعنية loading ، نظرًا لأن هذه الطريقة لتسمية أنها تتوافق مع تلك المستخدمة عند اختيار اسم لسمة فك التشفير . الجمل السابقة ، مثل lazyload ، لم تنجح ، لأنه كان من الضروري لهذه السمة أن تدعم عدة قيم ( lazy ، eager ، و auto ).

تحقق من دعم المتصفح لسمة التحميل

أخذنا في الاعتبار أهمية إمكانية استخدام مكتبات JavaScript لتنظيم التحميل البطيء للمواد (لدعم المستعرض المتداخل لهذه الميزة). يمكنك التحقق مما إذا كان المتصفح يدعم خاصية loading خلال:

 <script> if ('loading' in HTMLImageElement.prototype) {   //   `loading`. } else {  //  -      JavaScript-   //    . } </script> 

لاحظ أنه يمكن استخدام سمة loading لتوسيع قدرات الصفحة تدريجياً. سيتمكّن المتصفحات التي تدعم هذه السمة من تنظيم تنزيل كسول للمواد باستخدام download loading=lazy ، وستقوم المتصفحات التي لا تدعم هذه الميزة بتنزيل هذه المواد ببساطة كما كان من قبل.

عبر متصفح كسول تحميل الصور

إذا كان دعم المستعرض المتقاطع للتحميل البطيء للصور أمرًا مهمًا ، فلا يكفي تحديد ما إذا كان المتصفح يدعم هذه الميزة ، وإذا لم يكن كذلك ، استخدم المكتبة المناسبة إذا كنت تستخدم تصميمًا مثل <img align="center" src=unicorn.jpg loading=lazy /> لوصف الصورة في الترميز <img align="center" src=unicorn.jpg loading=lazy /> .

في الترميز ، تحتاج إلى استخدام شيء مثل <img data-src=unicorn.jpg /> (بدلاً من src أو srcset أو <source> ) لتجنب التحميل العادي للصورة بواسطة المتصفحات التي لا تدعم السمة الجديدة. لتغيير هذه السمات إلى تلك التي تحتاج إلى استخدامها بدعم من سمة loading للمتصفح ، أو لتنزيل المكتبة المقابلة إذا لم تكن هذه السمة مدعومة ، يمكنك استخدام JavaScript.

فيما يلي مثال على كيفية ظهور هذا:

 <!--   ,     ,   --> <img align="center" src="hero.jpg" alt=".."/> <!--    ,     --> <img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/> <script> (async () => {   if ('loading' in HTMLImageElement.prototype) {       const images = document.querySelectorAll("img.lazyload");       images.forEach(img => {           img.src = img.dataset.src;       });   } else {       //    LazySizes       const lazySizesLib = await import('/lazysizes.min.js');       //  LazySizes ( data-src & class=lazyload)       lazySizes.init(); // lazySizes    ,   .   } })(); </script> 

النظر في بعض الميزات من هذا الرمز:

• يتم وصف الصور المرئية للمستخدم مباشرة بعد تحميل الصفحة باستخدام علامات <img> . سيؤدي استخدام سمة data-src بدون src إلى عدم عرض الصور فور تحميل الصفحة ، وبالتالي ، لإعداد تلك الصور التي يجب أن تكون مرئية فور تحميل الصفحة ، يجب تحديد السمة src .
• عند وصف الصور غير المرئية فورًا للمستخدم بعد تحميل الصفحة ، نستخدم سمة data-src . يتم ذلك لمنعهم من التحميل بشكل طبيعي في المتصفحات التي لا تدعم سمة loading . إذا كان المتصفح يدعم هذه السمة ، فإننا نغير data-src إلى src .
• إذا كانت سمة loading غير مدعومة ، فسنحمّل المكتبة المساعدة (lazySizes) ونستهلها. نحن هنا نستخدم class=lazyload لتوجيه مكتبة LazySizes إلى الصور التي نريد العمل بها باستخدام تقنية التحميل البطيئة.

عرض

هنا يمكنك إلقاء نظرة على مثال لصفحة يتم فيها التحميل البطيء لـ 100 صورة من القطط. لكن ، إذا كانت مهتمة ، فإن تنزيلات الفيديو لهذه الصفحة.

ميزات التنفيذ لتحميل دعم السمة في Chrome

نوصي بشدة أنه قبل استخدام سمة loading في الإنتاج ، انتظر حتى يظهر دعمها في الإصدار الثابت من Chrome. إذا كنت حريصًا على تجربة هذه الفرصة ، فربما تكون مهتمًا بما سنتحدث عنه.

تحميل اختبار السمة

لتجربة السمة الجديدة في الوقت الحالي ، انتقل إلى صفحة إعدادات علامات Chrome ( chrome://flags ) ، وقم Enable lazy image loading Enable lazy frame loading Enable lazy image loading علامات Enable lazy image loading ، ثم أعد تشغيل المتصفح.

إعدادات المتصفح

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

 canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=5000,lazyImageLoadingDistanceThresholdPxOffline=8000,lazyImageLoadingDistanceThresholdPxSlow2G=8000,lazyImageLoadingDistanceThresholdPx2G=6000,lazyImageLoadingDistanceThresholdPx3G=4000,lazyImageLoadingDistanceThresholdPx4G=3000 'https://mathiasbynens.be/demo/img-loading-lazy' 

يتوافق الأمر أعلاه مع الإعدادات الافتراضية الحالية. من أجل بدء تحميل الصور إذا كان موضع تمرير الصفحة 400 بكسل من الصورة ، يجب تغيير جميع القيم في هذا الأمر إلى 400. وفيما يلي مثال على تنوع 1 بكسل لهذا الأمر (يتم استخدام هذا الإعداد في الفيديو أعلاه ).

 canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=1,lazyImageLoadingDistanceThresholdPxOffline=1,lazyImageLoadingDistanceThresholdPxSlow2G=1,lazyImageLoadingDistanceThresholdPx2G=1,lazyImageLoadingDistanceThresholdPx3G=1,lazyImageLoadingDistanceThresholdPx4G=1 'https://mathiasbynens.be/demo/img-loading-lazy' 

من المحتمل جدًا أن يتغير التكوين القياسي للتحميل البطيء في Chrome مع استقرار تنفيذ هذه الميزة في الأسابيع المقبلة.

أدوات المطور

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


تحميل شظايا من ملفات الرسومات

يقوم Chrome بتنزيل بيانات الصورة المتبقية فور اقتراب المستخدم من رؤيتها. عند العمل مع أدوات المطور ، يمكن أن يؤدي ذلك إلى حقيقة أن المعلومات المتعلقة بتنزيلات صورتين يمكن أن "تظهر" في لوحة الشبكة ، وسيتم عرض معلومات حول طلبين يتم تنفيذها لتنزيل كل صورة في لوحة توقيت الموارد.

خادم دعم المستعرض الذي يحدد سمة التحميل

إذا عشنا في عالم مثالي ، من أجل معرفة ما إذا كان من الضروري استخدام المكتبة المساعدة لإخراج الصفحة الصحيح في مستعرض معين ، فلن يضطر المرء إلى الاعتماد على تحليل المتصفح باستخدام جافا سكريبت من جانب العميل. باستخدام هذا النهج ، فإن الخادم ، مع العلم مقدمًا ما إذا كانت هذه المكتبة مطلوبة أم لا ، سيضمها (أو لا يدرجها) في الصفحة المرسلة إلى المستعرض. يمكن جعل مثل هذا التحقق ممكنًا باستخدام تقنية HTTP Client Hint ، وبفضل ذلك يستطيع العميل إرسال "تلميحات" حول إمكانياته إلى الخادم.

أصبح "التلميح" المقابل فيما يتعلق بدعم خاصية loading في مرحلة مبكرة من الدراسة .

النتائج

يدعو مؤلف هذه المادة كل شخص مهتم باستخدام سمة loading عند العمل مع <img> و <iframe> العناصر لتجربتها ومشاركة انطباعاتها معها . إنه مهتم بشكل خاص بمعرفة كيف ، من وجهة نظر المطورين ، تبدو آليات دعم المستعرضات المقترحة هنا للتحميل البطيء للبيانات ، وما إذا كان قد فاته بعض الحالات المتعلقة بالحدود عند الحديث عن مثل هذه الآليات.

أعزائي القراء! هل تخطط لاستخدام سمة loading في مشاريعك؟