تصميم سريع الاستجابة - استعلامات الوسائط - كيفية عدم تحميل صور معينة
https://stackoverflow.com/questions/7385433
-
29-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
حسنًا، لقد صممت تخطيطًا سريع الاستجابة لا يعرض الصور لأحجام الشاشات الصغيرة جدًا، وذلك باستخدام استعلامات الوسائط و display: none;.
حتى الان جيدة جدا.ولكن لا يزال يتم تنزيل هذه الصور على هذه الأجهزة، مما يتسبب في زيادة عرض النطاق الترددي.
ما هي الطريقة الصحيحة لمنع تنزيل هذه الصور على الأجهزة المحددة؟
أي رد سيكون موضع تقدير كبير!
المحلول
الحل الوحيد الذي يمكن الوصول إليه الآن هو التفاف الصورة مع علامات GransoSodicetAgCode، ثم اسحب الصورة لاحقا مع JavaScript. ملفات تعريف الارتباط لا تعمل على تحميل الصفحة الأولى (HTMLPRELoAdscanner)، ولا مع CDNSوبعداستنشاق المتصفح عديم الفائدة إذا كانت صورك ليست دائما 100٪ من Viewport.
تنفذات Slimmage.js الصور المستجيبة للسياق في 3 كيلو بايت من الفانيليا JS .
العلامة بسيط جدا وكذلك:
giveacodicetagpre.
بالطبع، يمكنك إنشاء مساعد جانب الخادم حتى مجردة هذا بعيدا.
نصائح أخرى
خياران يمكنني التفكير فيهما:
- اكتشف الأجهزة الصغيرة على الخادم باستخدام تحسس المتصفح، وأرسل لها HTML مختلفًا لا يشير إلى الصور.
- عرض الصور عبر CSS بدلاً من HTML (في
styleالسمات إذا أردت)، وذلك باستخدام أي منهماbackground-imageأو:before/:afterوcontent(غير مدعوم في IE 6 أو 7)، وقم بتغليف رمز CSS هذا في استعلامات الوسائط بحيث يتم عرضه فقط بواسطة الأجهزة ذات الشاشات الأكبر.
إذا كنت لا تمانع في اعتماد جافا سكريبت، فيمكنك التحقق window.innerWidth وأدخل علامات الصور للشاشات الكبيرة بما فيه الكفاية.
لن يتم طلب الصور إلا إذا تم تمكين جافا سكريبت وكانت النافذة كبيرة بما يكفي.
إذا لم تكن لديك أية مشكلات في استخدام JavaScript إضافي ، فيمكنك تجربة هذا .لقد عثرت عليه أثناء البحث والتعرف على استعلامات الوسائط.
