วิธีการโหลดภาพล่วงหน้าที่ใช้เฉพาะเมื่อวางเมาส์บนแล้ว?

ฉันมีลิงค์ที่ขึ้นต้นด้วยภาพพื้นหลังหนึ่งแล้วเปลี่ยนไปวางไว้ที่อีกอันหนึ่ง ภาพพื้นหลังทั้งสองถูกกำหนดไว้ใน 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) ใช้JavaScript นี้

<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>

ฉันไม่ชอบโซลูชัน javascript จริง ๆ มันยุ่งยากที่จะรักษาและแน่นอนว่าล้มเหลวอย่างสิ้นเชิงเมื่อปิดใช้งาน JS

ทางออกที่ทันสมัยคือการใช้CSS Spritesลองเชื่อฉันคุณจะสงสัยว่าทำไมคุณไม่เคยทำสิ่งนี้มาก่อน;)

ฉันพบลิงค์นี้เกี่ยวกับวิธีโหลดภาพล่วงหน้าโดยใช้ CSS บริสุทธิ์:

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

และมันใช้งานได้สำหรับฉันเมื่อฉันต้องการเปลี่ยนภาพพื้นหลังที่แตกต่างกันในการโฮเวอร์

เพิ่มสิ่งนี้เหนือ CSS ของคุณ:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

หากคุณไปเส้นทางสไปรต์เนื่องจาก danp แนะนำว่าคุณยังมีปัญหากับการโหลดสไปรต์ก่อนที่จะต้องการ ที่กล่าวว่าฉันรักสไปรต์; เพื่อทำให้ง่ายฉันใช้เครื่องมือ spritemeจาก Steve Souders: