CSS veya JavaScript ile Görüntüleri Önceden Yüklemenin (Preload) 4 Yolu

Preloader bu konuda size yardımcı olacaktır! Bu yöntem görüntüleri tarayıcınızın önbelleğine yükler ve depolar. Yani rollover efektleri ile gecikmeleri önler. Bu makalede, CSS veya javascript tekniği ile görüntüleri önyüklemenin 4 yolunu öğreneceksiniz.

1. SEÇENEK: Küçük CSS kullanın

#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();
}

ve başka bir örnek:

ul{
margin: 0;
padding: 0;
list-style-type: none;
font: 13px ‘Lucida Grande’, Arial, sans-serif;
}
ul li{
display: inline;
}
ul li a{
display:block;
width:120px;
text-decoration: none;
padding: 0.3em 1em;
color: #000;
background:url(images/link.gif);
}
ul li a:hover{
width:120px;
background:url(images/hover.gif);
}

SEÇENEK 2: JavaScript ile Görüntüleri Önceden Yükle

Preload istediğiniz her resim için JavaScript iki satır olması gerekir, ve tarayıcı JavaScript desteği ihtiyacı ve sitenizde JavaScript iki satır olacaktır.

SEÇENEK 3: jQuery ile CSS görüntüleri otomatik olarak Önceden Yükle

$(document).ready(function(){ $.preloadCssImages(); });

SEÇENEK 4: Gizli Bir Kare ile Görüntüleri Kaynaştır
Gizli bir çerçeve ile sadece% 0 olarak ayarlanmış bir çerçeve penceresi.