Bagaimana cara pra-memuat gambar yang hanya digunakan pada hover?

14

Saya memiliki tautan yang dimulai dengan satu gambar latar belakang dan kemudian berubah pada kursor ke yang lain. Kedua gambar latar belakang diatur dalam CSS. Browser saya (salah satunya) tampaknya tidak memuat gambar hover sampai Anda benar-benar melayang. Tetapi kemudian Anda berakhir dengan gambar kosong selama beberapa detik (pada koneksi saya yang sangat lambat) yang diperlukan untuk memuat yang baru. Apakah ada cara untuk mendorong browser agar memuat gambar hover agar tidak terjadi waktu tunda?

css images load-time Daniel Bingham
sumber

Jawaban:

17

1) Gunakan CSS Sprite (Ini adalah metode yang disukai).

2) Muat gambar dalam div tersembunyi. Tempatkan gambar di div dan kemudian atur CSS div display: none;untuk menyembunyikannya.

3) Muat gambar dengan 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) Gunakan JavaScript ini

<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>
John Conde
sumber
Apakah ada cara untuk memuatnya setelah halaman dimuat? Jadi pengguna tidak melihat lingkaran pemuatan di kursor? Salah satu caranya adalah dengan memiliki bingkai tersembunyi yang menggunakan javascript untuk menunda bingkai tersembunyi yang akan ditampilkan, seperti pada pertanyaan saya stackoverflow.com/questions/13437091/… tetapi apakah ada metode yang disukai untuk menunda dan tidak menampilkan lingkaran pemuatan pada kursor itu ?
riseagainst
Nevermind, saya menemukan ini perishablepress.com/3-ways-preload-images-css-javascript-ajax dan berfungsi dengan sempurna dengan penundaan waktu.
riseagainst
10

Saya tidak terlalu menyukai solusi javascript - ini berantakan, sulit untuk dipelihara, dan tentu saja gagal total ketika JS dinonaktifkan.

Solusi modern adalah menggunakan CSS Sprite - coba, percayalah, Anda akan heran mengapa Anda tidak pernah melakukan ini sebelumnya;)

dmp
sumber
0

Tambahkan ini di atas CSS Anda:

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

Jika Anda memilih rute sprite sebagai danp menunjukkan Anda masih memiliki masalah dengan memuat sprite sebelum diperlukan. Yang mengatakan saya suka sprite; untuk membuatnya dengan mudah, saya menggunakan alat spriteme dari Steve Souders:

Nisse Engström
sumber