التحميل المسبق لصورة CSS النقية

مترجم من: إنشاء أداة التحميل المسبق لصورة CSS
الصينية: التحميل المسبق لصور CSS النقية

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

لماذا استخدام التحميل المسبق

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

كود CSS

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

هنا مثال:

#التحميل المسبق {
/* الصور التي تريد تحميلها مسبقًا*/
صورة الخلفية: url(image1.jpg);
صورة الخلفية: url(image2.jpg);
صورة الخلفية: url(image3.jpg);
العرض: 0 بكسل؛
الارتفاع: 0 بكسل؛
العرض: مضمن؛
}

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

حالة أخرى

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

img { الخلفية: url(loadingHourGlass.gif) بدون تكرار 50% 50% }

يمكن أن تكون صور GIF متحركة، على غرار أشياء مثل كرات الشاطئ على جهاز Mac أو الساعات الرملية على جهاز الكمبيوتر. استخدم الرسوم المتحركة حتى يعرف المستخدم أن شيئًا ما يحدث.

ختاماً

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

عرض تجريبي

ملاحظات خاصة حول المثال 1

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

وفقًا لاختباراتي، تقوم معظم المتصفحات بتحميل الصورة الأخيرة فقط، ويتم تجاهل الصورتين الأوليين . ولكن في متصفحات webkit الأساسية، مثل chrome، سيتم تحميل هذه الصور الثلاث مسبقًا. يقدم لنا المثال 1 فكرة جيدة لحل المشكلة ، ولكن لاستخدام تحميل صور متعددة بنفس نمط CSS، قد نضطر إلى الانتظار حتى يتم دعم سمات صور الخلفية المتعددة لـ CSS3 بواسطة المزيد من المتصفحات.

ملاحظة: اسمحوا لي أن أشرح هذا العرض. ربما لم يفكر المؤلف الأصلي كثيرًا وأراد فقط توضيح تأثير التحميل المسبق، لذلك كانت هذه الصفحة التجريبية بسيطة بعض الشيء: لقد استخدم فقط الصورة المحملة مسبقًا كخلفية لـ:hover، بحيث عندما يمر الماوس فوقها ذلك، يمكن أن يكون واقعًا خاليًا من الوميض لتلك الصورة. حسنًا، هذا هو الاستخدام الثاني في المقالة..