it-swarm.asia

كيف يمكنني تشجيع المتصفح على تنزيل الصور من ملف CSS بشكل أسرع؟

أستخدم CSS لوضع الكثير من صوري (كخلفية لـ <div>) وكثيراً ما أجد أنها يتم تحميلها ببطء شديد بهذه الطريقة. يبدو أنها آخر شيء يتم تحميله. حتى الصور الصغيرة ذات الأيقونة الصغيرة تستغرق بعض الوقت لتظهر بهذه الطريقة. هل هناك طريقة لإعطاء المستعرض أولوية للصور؟ أو احصل عليه لتنزيل الصور في ملف CSS مسبقًا وتقديمها مسبقًا؟

13
Daniel Bingham

CSS هو التصميم وليس المحتوى. تحاول المتصفحات (عن حق) عرض المحتوى قبل إضافة التصميم ، ومن هنا يكون سبب تحميل الصور في أوراق الأنماط عادةً إلى آخر مرة. إذا كانت الصور مهمة لـ محتوى ، فأضفها عبر علامات HTML القياسية <IMG>.

10
Dan Diplo

استخدم URI المطلقة من ورقة الأنماط الخاصة بك و أضف الصور من علامات IMG إلى مخفي <div> على الصفحة (يفترض هذا أنك تستخدم نفس الصور في كل صفحة ؛ ومن الأفضل في تذييل الصفحة لذلك انهم جميعا تحميلها وتخزينها مؤقتا في أي مكالمة صفحة معينة).

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

5
danlefree

للمتصفحات التي تدعم نوع URI للبيانات (راجع http://en.wikipedia.org/wiki/Data_Uri للحصول على معلومات) لتضمين الصورة في CSS نفسه.

هذا له بعض العيوب على الرغم من:

  • يتم إعادة تحميل البيانات عندما يتم CSS ، بدلاً من أن يتم تخزينها في ذاكرة التخزين المؤقت بشكل منفصل ، على الرغم من أن CSS لا يتغير بانتظام ، فهذه ليست مشكلة كبيرة.
  • افتقاد CSS للميراث وهذه الوسائل قد تكون هناك أوقات (إضاعة عرض النطاق الترددي) عندما يتعين عليك تضمين نفس الرسم عدة مرات أو تغيير الفئات المستخدمة في وثيقتك.
  • يتم تشفير الصور base64 عند استخدامها بهذه الطريقة مما يعني أنها تأخذ مزيدًا من النطاق الترددي (على الرغم من أن مشكلة النطاق الترددي أقل أهمية بكثير إذا كنت ترسل البيانات المضغوطة).
  • ستحتاج إلى توفير أنماط بديلة للمتصفحات التي لا تدعم URIs للبيانات ، بعضها بعيد عن المألوف (IE6 و IE7 على سبيل المثال).
2
David Spillett

استخدم CSS sprites ، خاصة للرموز.

1
Bobby Jack

اجعل صورك صغيرة بقدر الإمكان. يمكنك استخدام smush.it لإزالة البايتات غير الضرورية.

1
Emily

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

1
John Conde