HTML'de görüntüleri önceden yükleme, daha modern bir yolu var mı?

Question

Fare olayında JS tarafından yüklenmiş bir görüntü var. Oldukça büyük bir görüntü, bu yüzden önceden yüklenmiş olduğundan emin olmak istiyorum. Yıllar önce bazı eski teknikler reemmber ve this example bulundu: Bunu otomatik olarak kullanılmayan görüntüleri algılar ve onları yine de önceden yüklemek tarayıcılar belki hala/iyi alakalı veya merak

<SCRIPT LANGUAGE = JAVASCRIPT> 
if (document.images) 
{ 
    img1 = new Image(); 
    img2 = new Image(); 
    img1.src = "imageName1.gif"; 
    img2.src = "imageName2.gif" 
} 
</SCRIPT> 

? Sayfamın IE6'yı desteklediğini unutmayın, bu yüzden yine de eski tekniklere ihtiyacım olabilir, ancak daha modern tarayıcıların daha iyi bir yolu olup olmadığını merak ediyorum.

Answer 1

Hayır, işte bu kadar. Neden işe yarayan bir şeyi değiştirsin?

Ancak daha düzgün kullanım değişkenleri ile küresel kapsamını yığılan bu kaçınır bu

(function() { 
    var img1 = new Image(); 
    var img2 = new Image(); 
    img1.src = "imageName1.gif"; 
    img2.src = "imageName2.gif" 
})(); 

ya da sadece

new Image().src = "imageName1.gif"; 
new Image().src = "imageName2.gif" 

İkisi gibidir.

Ve language="JavaScript" kullanımdan kaldırılmıştır. type="text/javascript"'u kullanın.

Answer 2

Ne tür görüntüler hakkında konuştuğunuza, simgeler/düğmeler vb. CSS Sprite adlı bir teknik kullanılarak yapılabilir. ilginç

http://www.alistapart.com/articles/sprites

Answer 3

. Son zamanlarda kendime aynı soruyu soruyordum. Diğer bir yöntem, her öğe için bir DOM öğesi oluşturmak ve bunu belge gövdesine enjekte etmeden önce görüntülemeniz gerekene kadar beklemektir. Bildiğiniz Örneğin,

sonra sonra

var img1 = document.createElement('img'); 
var img2 = document.createElement('img'); 
img1.setAttribute('src','imageName1.gif'); 
img2.setAttribute('src','imageName2.gif'); 

... ve, görüntüler

document.getElementById('imagePlaceholder1').appendChild(img1); 
document.getElementById('imagePlaceholder2').appendChild(img2); 

Bu içinde 'önceden yüklenmiş' dosya alma neden yok ... eklenecek hazır Test ettiğim modern tarayıcılar ve aslında kendi kodlama stillerinizle daha tutarlı olabilirler, ancak hala bazı tarayıcıların görüntü oluşturma sırasında görüntüyü yüklemeyebileceğinden endişeleniyorum ama belge gövdesine eklenene kadar beklemiyorum. Bu yüzden bahsettiğiniz kesin çözümü kullanmayı tercih ettim. En azından ECMAScript'in bir sonraki güncellemesine kadar, "eski kod" ile ilgili bir sorun yoktur (en azından yeni Resim() gibi eski bir kod). Çalışır ve bu şekilde çalışması amaçlanmıştır. Bence özellikle hacky değil.

[Düzenle] Görüntülerin yüklendiğinden ve/veya kullanıcının onu yapmasını beklediğinizden emin olduğunda, ikinci kod bloğu, yürütme işlemini gerçekleştirmesini beklediğinizden emin olmak için yapılmalıdır.