Görüntü ön yüklemesini kullanmanın en büyük nedenlerinden biri, bir mouseOver veya: hover olayındaki bir öğenin arka plan görüntüsü için bir görüntü kullanmak istemenizdir. CSS'de sadece arka plan resmini: hover durumu için uygularsanız, söz konusu resim first: hover olayına kadar yüklenmeyecek ve bu nedenle, farenin o alanın üzerinden geçmesiyle gerçekte görünen resim arasında kısa bir can sıkıcı gecikme olacaktır .
Teknik # 1
Görüntüyü öğenin normal durumuna yükleyin, yalnızca arka plan konumu ile uzaklaştırın. Ardından fareyle üzerine gelindiğinde görüntülemek için arka plan konumunu taşıyın.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Teknik # 2
Söz konusu öğeye zaten uygulanmış bir arka plan resmi varsa ve bu resmi değiştirmeniz gerekiyorsa, yukarıdakiler çalışmayacaktır. Tipik olarak burada bir sprite (birleşik bir arka plan görüntüsü) seçersiniz ve sadece arka plan konumunu değiştirirsiniz. Ancak bu mümkün değilse, bunu deneyin. Arka plan resmini halihazırda kullanımda olan ancak bir arka plan resmi olmayan başka bir sayfa öğesine uygulayın.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Bu önyükleme tekniğinde kullanmak üzere yeni sayfa öğeleri oluşturma fikri aklınıza # preload-001, # preload-002 gibi gelebilir, ancak bu web standartlarının ruhuna aykırıdır. Bu nedenle, sayfanızda zaten var olan sayfa öğelerinin kullanılması.
Aynı öğeyi denemek ve kullanmak fikrim vardı, görseli yüklemek için sadece: after pseduo-class'ı kullanın, böylece sayfanızda çalışmak için yeterince gereksiz arka plandasız görsel olduğuna güvenmenize gerek kalmadı. ama her ne sebeple olursa olsun, onları düzgün bir şekilde önceden yüklemek istemedi.
Daha
JavaScript dahil bazı diğer teknikler için bu makaleye göz atın.