Ng-lazyload-image: Lazyload و srcset

أهلا،

هذه المكتبة للأسف لا تدعم srcset ، ولكن يجب أن تدعمها. إنها ميزة مهمة للغاية.

مع ما يقال ، ليس من السهل دعمه لأننا نحتاج إلى تحليل وفهم srcset بنفس الطريقة التي يقوم بها المتصفح.

الخيار 1:

نتعامل مع srcset كحالة خاصة ولا نحاول تحميل الصورة في الخلفية ولكن بدلاً من ذلك قمنا بتعيين srcset عندما تكون الصورة هي منفذ العرض:
لنفترض أن لدينا علامة html التالية:
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
عندما تكون الصورة في منفذ العرض ، نلقي نظرة على srcset ونكتشف أن lazyLoad يحتوي على سلسلة srcset وقم فقط بتحويل العلامة إلى:
<img srcset="small.jpg 300w, large.jpg 500w">

طليعة:
تنفيذ بسيط
يخدع:
لن يرى المستخدم "defaultImage" أبدًا.
لا يمكننا أبدًا معالجة خطأ الشبكة أثناء تحميل الصورة.

الخيار 2:

نقوم بتحليل srcset ونختار الخيار الأفضل (كما نعتقد أن المتصفح كان يجب أن يفعل).
لنفترض أن لدينا علامة html التالية:
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
اكتشفنا أن lazyLoad يحتوي على srcset ونحلل السلسلة إلى شيء مثل:
[ { url: 'small.jpg', width: 300 }, { url: 'large.jpg', width: 500 } ]
نقارنها بعرض المتصفح ( ونسبة البكسل للجهاز ) ونختار أفضل صورة. يقوم بتحميل الصورة في الخلفية وعندما يتم تحميلها ، نقوم فقط بتعيين srcset وبما أن الصورة في ذاكرة التخزين المؤقت ، سيتم تحميلها على الفور.

طليعة:
سيتم تحميل الصورة البطيئة 🎉
سيرى المستخدم الصورة الافتراضية.
يمكننا معالجة أخطاء الشبكة (هل يجب أن نحاول تحميل بعض الصور الأخرى من srcset أم يجب علينا فقط تحميل صورة الخطأ ؟).
يخدع:
من الصعب دائمًا تحليل سلسلة بالطريقة نفسها التي كان يجب أن يفعلها المتصفح ؛ ربما نفتقد بعض حالات استخدام الحافة.
من وجهة نظري ، سيستخدم المتصفح دائمًا أكبر صورة إذا تم تخزينها في ذاكرة التخزين المؤقت. نظرًا لعدم وجود طريقة لمعرفة ما إذا كانت الصورة قد تم تحميلها بالفعل ، يتعين علينا تحميل أفضل صورة ملائمة (ولكن سيتم عرض أكبر صورة بعد أن قمنا بتعيين srcset ). على سبيل المثال ، لنفترض أن لدينا srcset التالي small.jpg 300w, large.jpg 500w والشاشة أقل من 500 بكسل ولكن تم تحميل large.jpg بالفعل. من وجهة نظري ، كان من المفترض أن يكون المتصفح قد اخترق large.jpg لأنه موجود في ذاكرة التخزين المؤقت ولكن نظرًا لأننا لا نعلم أننا سنقوم بتحميل small.jpg وعندما يتم تحميله سنقوم بتعيين srcset وسيختار المتصفح large.jpg (ومع ذلك يمكن أن أكون مخطئًا). على سبيل المثال ، قمنا بتحميل صورة دون داعٍ.

استنتاج:

أعتقد أن الخيار 2 ممكن (لا ينبغي أن يكون صعبًا للغاية) وأعتقد أنه ينبغي علينا القيام بذلك. ومع ذلك ، فإن وقتي محدود للغاية في الوقت الحالي ولكني أقبل بحسن الحظ العلاقات العامة :)

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

أو تجاهل خيار srcset للمتصفح الافتراضي وقم بتنفيذه كعملية اتخاذ القرار الخاصة بك وقم بضبطه مع الوقت لجعله على أفضل وجه ممكن :)

المواصفات

ما عليك سوى الالتزام بالمواصفات وأعتقد أن المواصفات واضحة تمامًا.

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

لقد أرسلت طلب سحب (# 231) يضيف دعم الصورة المتجاوبة لكليهما \ أنا في انتظار أي مساهمة.

يتم تضمين هذا في 3.4.0 . شكرا sapierens