لدي رابط يبدأ مع صورة خلفية واحدة ثم يتغير في وضع التحويم إلى آخر. يتم تعيين كل من الصور الخلفية في CSS. لا يبدو أن المستعرضات الخاصة بي (أي منها) تقوم بتحميل صورة التحويم حتى تقوم بالتمرير فعليًا. ولكن بعد ذلك ينتهي بك الأمر مع وجود صورة فارغة لعدة ثوانٍ (على الاتصال البطيء للغاية) يتطلب الأمر تحميل صورة جديدة. هل هناك طريقة لتشجيع المستعرض على تحميل صورة التحويم مسبقًا حتى لا يحدث وقت التأخير على التحويم؟
1) استخدام CSS Sprites (هذه هي الطريقة المفضلة).
2) قم بتحميل الصور في div مخفي. ضع الصور في div ثم قم بتعيين CSS الخاص بـ div على display: none;
لإخفائها.
3) تحميل الصور مع CSS :
#preloadedImages
{
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
4) استخدام هذا جافا سكريبت
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>
لا أحب حقًا حل جافا سكريبت - إنه فوضوي ، يصعب صيانته ، وفشل تمامًا عند تعطيل JS.
الحل الحديث هو استخدام CSS Sprites - جربه ، صدقني ، سوف تتساءل لماذا لم تفعل هذا من قبل ؛)
لقد وجدت هذا الرابط حول كيفية تحميل الصور مسبقًا باستخدام CSS خالص:
http://www.thecssninja.com/css/even-better-image-preloading-with-css2
لقد كان الأمر ناجحًا بالنسبة لي عندما أحتاج إلى تغيير صور الخلفية المختلفة على التحويم.