it-swarm.asia

كيفية التحميل المسبق للصور المستخدمة فقط على التحويم؟

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

14
Daniel Bingham

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>
17
John Conde

لا أحب حقًا حل جافا سكريبت - إنه فوضوي ، يصعب صيانته ، وفشل تمامًا عند تعطيل JS.

الحل الحديث هو استخدام CSS Sprites - جربه ، صدقني ، سوف تتساءل لماذا لم تفعل هذا من قبل ؛)

10
dmp

لقد وجدت هذا الرابط حول كيفية تحميل الصور مسبقًا باستخدام CSS خالص:

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

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

0
Sheena Katrina