CSS Gambar preloading

Satu alasan besar untuk menggunakan timbunan sebagai preloading gambar adalah jika Anda ingin menggunakan gambar untuk gambar latar belakang-suatu unsur pada mouseover atau hover. Jika Anda hanya menerapkan background-image dalam CSS untuk hover , gambar tidak akan memuat sampai hover dan dengan demikian akan ada penundaan menjengkelkan pendek antara mouse pada daerah gambar sampai gambar sebenarnya muncul .
Teknik # 1
Memuat gambar pada elemen biasa, hanya bergeser jauh dengan posisi latar belakang. Kemudian memindahkan posisi latar belakang untuk menampilkannya di hover.
#grass { background:url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }
Teknik # 2
Jika elemen yang bersangkutan sudah memiliki background-image diterapkan, Anda hanya perlu mengubah citra tersebut, karena trik di atas tidak akan bekerja. Biasanya Anda akan dihadapkan pada sprite di sini (gambar latar belakang gabungan) dan hanya menggeser posisi latar belakang. Tetapi jika itu tidak mungkin, cobalah Terapkan gambar latar belakang untuk elemen halaman yang sudah digunakan, tetapi tidak memiliki gambar latar belakang.
#random-unsuspecting-element { background:url(images/grass.png)) no-repeat -9999px -9999px; }
#grass:hover { background:url(images/grass.png) no-repeat; }

intinya membuat elemen halaman baru yang akan digunakan untuk teknik ini preloading mungkin muncul di awal load gambar, seperti # preload-001, # preload-002, tapi itu agak bertentangan dengan semangat standar web. Oleh karena itu pergunakan elemen halaman yang sudah ada di halaman Anda.

Saya punya ide untuk mencoba dan menggunakan unsur yang sama, hanya menggunakan class psuedo kelas untuk memuat gambar, sehingga Anda tidak perlu bergantung pada gambar latar belakang untuk memuat gambar sebenarnya..
untuk lebih jelas saya akan memberi relasi tutorialnya.. tapi sayangnya masih dalam bahasa inggir.. saya lagi malas untuk menterjemahkannya.. hehehe... Ups !!! sory ...

silahkan check artikel ini untuk teknik dan javascript nya..

0 comments:

Post a Comment

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top