🔣 👨🏿‍⚕️ 🛀🏻 كسول تحميل صورة المتصفح (تحميل السمة) 🤚🏼 👍🏼 🕘

لقد حان الدعم للصور البطيئة المضمنة وتحميل iframe إلى الويب!
بدءًا من الإصدار 76 من Chrome ، يمكنك استخدام سمة loading الجديدة لتحميل الموارد بتكاسل دون الحاجة إلى كتابة تعليمات برمجية إضافية لهذا أو استخدام مكتبة JavaScript تابعة لجهة خارجية. لنلقي نظرة على التفاصيل.

يوضح هذا الفيديو مثالًا على هذه الوظيفة:

لماذا المدمج في التحميل كسول؟

وفقًا لـ HTTPArchive ، تعد الصور أكثر أنواع الموارد المطلوبة في معظم المواقع وتستهلك عادةً نطاقًا تردديًا أكبر من غيرها. في النسبة المئوية التسعين ، ترسل المواقع حوالي 4.7 ميغابايت من الصور إلى أجهزة الكمبيوتر المكتبية والأجهزة المحمولة. صور كافية مع القطط .

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

يوجد حاليًا طريقتان لتأخير تحميل الصور والإطارات الموجودة خارج الشاشة:

باستخدام Intersection Observer API
باستخدام scroll الأحداث أو resize أو resize orientationchange

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

تحميل السمة

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

في Chrome 76 ، يمكنك استخدام سمة loading لتأخير تحميل الصور والإطارات من الشاشة بشكل دائم ، والتي يمكن الوصول إليها عن طريق التمرير:

 <img src="image.png" loading="lazy" alt="…" width="200" height="200"> <iframe src="https://example.com" loading="lazy"></iframe>

loading قيم السمات المدعومة:

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

سيستمر تحديث هذه الميزة حتى يتم تشغيلها في الإصدار الثابت (ليس أقدم من Chrome 76). ولكن يمكنك تجربتها عن طريق تنشيط العلامات التالية في Chrome:

chrome: // flags / # enable-lazy-image-loading
الكروم: // أعلام / # تمكين كسول الإطار تحميل

تحميل مسافة العتبة

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

المسافة التي يبدأ عندها التحميل غير ثابتة وتختلف تبعًا لعدة عوامل:

نوع المورد المراد تحميله (صورة أو إطار)
هل تم تشغيل " الوضع البسيط " في متصفح Chrome لنظام Android
نوع اتصال فعال

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

في Chrome 77 ، يمكنك تجربة هذه العتبات المختلفة عن طريق إبطاء سرعة الاتصال في DevTools. خلال هذا ، ستحتاج إلى تجاوز نوع الاتصال الفعال في المستعرض باستخدام العلامة chrome://flags/#force-effective-connection-type.

تحميل الصور

تؤثر سمة التحميل على الإطارات بشكل مختلف عن الصور ، اعتمادًا على ما إذا كان الإطار مخفيًا (غالبًا ما تستخدم الإطارات المخفية للتحليلات أو مهام الاتصال). يستخدم Chrome المعايير التالية لتحديد ما إذا كان الإطار مخفيًا:

عرض الإطار والارتفاع 4px أو أقل
display: none أو visibility: hidden تنطبق الخصائص visibility: hidden
الإطار خارج الشاشة باستخدام وضع X أو Y سالب

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

التعليمات

هل هناك أي خطط لتوسيع هذه الميزة؟

هناك خطط لتغيير وضع التحميل المؤجل للمتصفح الافتراضي لعرض أي صور وإطارات يمكن أن يتأخر تحميلها في هذا الوضع تلقائيًا إذا تم تمكين الوضع البسيط في Chrome لنظام Android.

هل من الممكن تغيير المسافة إلى الصورة أو الإطار الذي يبدأ عنده التحميل المتأخر؟

هذه القيم هي hardcoded ولا يمكن تغييرها من خلال API. ومع ذلك ، فقد يتغيرون في المستقبل ، حيث يقوم فريق Chrome بتجربة مسافات ومتغيرات عتبية مختلفة.

هل يمكن للصور التي تم تعيينها عبر خاصية خلفية CSS الحصول على سمة التحميل؟

لا ، في الوقت الحالي يمكن استخدامه فقط مع العلامات.

كيف تعمل سمة التحميل مع الصور الموجودة في نطاقها ولكنها غير مرئية (مثل دائري)؟

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

ماذا لو كنت أستخدم مكتبة أو برنامج نصيًا تابعًا لجهة خارجية لتأجيل تحميل الصور أو الإطارات؟

يجب ألا تؤثر سمة التحميل على الكود الذي يقوم بتحميل البيانات في الوضع المؤجل ، ولكن من المهم مراعاة بعض النقاط المهمة:

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

أحد الأسباب المهمة لمواصلة استخدام مكتبة تابعة لجهة خارجية بالتوازي مع التحميل = "كسول" هو توفير ملف متعدد الملفات للمتصفحات التي لا تدعم هذه السمة.

هل تدعم المتصفحات الأخرى التحميل المتكامل كسول؟

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

تم اقتراح API مماثل واستخدامه في IE و Edge ، لكنه كان يركز على خفض أولويات التنزيل بدلاً من تأجيله بالكامل.

ماذا تفعل مع المتصفحات التي لا تدعم التنزيل المتأخر المدمج؟

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

 if ('loading' in HTMLImageElement.prototype) { // supported in browser } else { // fetch polyfill/third-party library }

على سبيل المثال ، lazysizes هي مكتبة جافا سكريبت شائعة للتحميل الكسول. يمكنك تحديد دعم لسمة loading لتحميل هذه المكتبة فقط عندما يكون loading مدعوم. وهي تعمل على النحو التالي

 <!-- Let's load this in-viewport image normally --> <img src="hero.jpg" alt="…"> <!-- Let's lazy-load the rest of these images --> <img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload"> <img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload"> <img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload"> <script> if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[loading="lazy"]'); images.forEach(img => { img.src = img.dataset.src; }); } else { // Dynamically import the LazySizes library const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js'; document.body.appendChild(script); } </script>

مظاهرة العمل. جرِّب ذلك في المتصفحات مثل Firefox أو Safari لمشاهدة التداعيات.

توفر مكتبة lazysizes أيضًا مكونًا إضافيًا للتحميل مدمجًا يستخدم التحميل المتأخر المضمّن عند الإمكان ، ويستخدم وظيفة المكتبة عند الضرورة.

كيف يؤثر التأخر في التحميل المضمّن على الإعلانات على الصفحة؟

يتم أيضًا تحميل جميع الإعلانات المقدمة في صورة صور أو إطارات في وضع مؤجل ، مثل أي صور أو إطارات أخرى.

كيف تتم معالجة الصور إذا تمت طباعة صفحة ويب؟

على الرغم من عدم وجود وظيفة في Chrome 76 ، إلا أن هناك مشكلة مفتوحة تقوم على الفور بتحميل جميع الصور والإطارات عند طباعة صفحة.

استنتاج

استخدام الدعم المضمن للتحميل البطيء للصور والإطارات يمكن أن يحسن أداء صفحات الويب بشكل كبير.

إذا لاحظت أي سلوك غير عادي عند تمكين هذه الميزة في Chrome ، فأبلغ عن خطأ .

كسول تحميل صورة المتصفح (تحميل السمة)