Yalnızca fareyle üzerine gelindiğinde kullanılan resimler nasıl önceden yüklenir?

14

Bir arka plan görüntüsü ile başlayan ve daha sonra başka bir fareyle değiştiğinde bir bağlantı var. Her iki arka plan görüntüsü CSS'de ayarlanır. Tarayıcılarım (bunlardan herhangi biri), fareyle üzerine gelene kadar fareyle üzerine gelme görüntüsünü yüklemiyor gibi görünüyor. Ama sonra birkaç saniye boyunca boş bir görüntü elde edersiniz (çok yavaş bağlantımda) yenisini yüklemek gerekir. Fareyle üzerine gelindiğinde gecikme süresinin oluşmaması için tarayıcıyı fareyle üzerine gelindiğinde görüntüyü önceden yüklemeye teşvik etmenin bir yolu var mı?

css images load-time

— Daniel Bingham
kaynak

17

1) CSS Sprite kullanın (Bu tercih edilen yöntemdir).

2) Görüntüleri gizli bir div'e yükleyin. Görüntüleri div'e yerleştirin ve sonra div'ın CSS'sini display: none;gizlemek üzere ayarlayın.

3) Görüntüleri CSS ile yükleyin :

#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) Bu JavaScript'i kullanın

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

Sayfa yüklendikten sonra bunları yüklemenin bir yolu var mı? Yani kullanıcı imleç üzerinde bir yükleme dairesi görmüyor mu? Bir yol, sorumun stackoverflow.com/questions/13437091/… gibi gizli çerçevenin görüntülenmesini geciktirmek için javascript kullanan gizli bir çerçeveye sahip olmak olabilir, ancak bu imleçte yükleme çemberini geciktirmek ve görüntülememek için tercih edilen bir yöntem var ?

— Ocak'ta

Boşver, bu perishablepress.com/3-ways-preload-images-css-javascript-ajax buldum ve zaman gecikmesi ile kusursuz çalışıyor.

— Ocak'ta

10

Javascript çözümünü gerçekten sevmiyorum - dağınık, bakımı zor ve JS devre dışı bırakıldığında elbette tamamen başarısız oluyor.

Modern çözüm CSS Sprite'ları kullanmaktır - deneyin, bana inanın, bunu neden daha önce hiç yapmadığınızı merak edeceksiniz;)

— dmp
kaynak

0

Saf CSS kullanarak görüntüleri önceden nasıl yükleyeceğime ilişkin bu bağlantıyı buldum:

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

Fareyle üzerine gelindiğinde farklı arka plan resimlerini değiştirmem gerektiğinde benim için çalıştı.

— Sheena Katrina
kaynak

0

Bunu CSS'nizin üstüne ekleyin:

<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 olarak sprite yoluna giderseniz, sprite'ı yüklemeden önce hala bir sorununuz olduğunu gösterir. Spriteları sevdiğimi söyledi; kolayca yapmak için Steve Souders'ın spriteme aracını kullanıyorum:

— Nisse Engström
kaynak