كيفية تحميل الصور المسبقة فقط باستخدام CSS (بدون JS)؟

Question

كيف يمكنني تحميل الصور المسبقة فقط باستخدام CSS، لذلك دون استخدام جافا سكريبت؟ يجب أن تكون متصفح عبر الإنترنت.

لا أريد استخدام العفاريت CSS. هل هناك أي حل آخر؟

Answer 1

يمكنك استخدام عناصر متعددة، مخفية background-position: -1000px -1000px; ومنحهم background-image لكل صورة تريد التحميل المسبق.

• يمكنك قراءة المزيد هنا

Answer 2

يستخدم CSS العفاريت.

Answer 3

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

<img src="/i/myimage.jpg" alt="image preload" style="display:none;" />

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

سيؤدي ذلك إلى تكبد المزيد من طلبات HTTP وإذا كنت ترغب في خفض أولئك الذين أقترحوا CSS Sprites إذا كان ذلك يهمك على الإطلاق.