Precaricamento delle immagini in HTML, esiste un modo più moderno?

Question

Ho un'immagine caricata da JS su un evento del mouse. È un'immagine abbastanza grande, quindi voglio assicurarmi che venga pre-caricato. Ho reemmber alcune vecchie tecniche da anni fa e ho trovato this example:

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

mi sono chiesto se questo è ancora buono/rilevanti, o forse i browser di rilevare automaticamente le immagini non utilizzati e li precarico comunque? Nota che la mia pagina deve supportare IE6, quindi potrei comunque aver bisogno di tecniche meno recenti, ma sono comunque interessato se i browser più moderni hanno un modo migliore?

Answer 1

No, questo è. Perché cambiare qualcosa che funziona?

Ma un uso più corretto è come questo

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

o semplicemente

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

Entrambi questi evita che ingombrano la portata globale con le variabili.

E language="JavaScript" è obsoleto. Utilizzare type="text/javascript".

Answer 2

Dipende dal tipo di immagini di cui si sta parlando, icone/pulsanti e così via, utilizzando una tecnica chiamata CSS Sprites.

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

Answer 3

Questo è interessante. Mi stavo ponendo la stessa identica domanda di recente. Un altro metodo potrebbe essere quello di creare un elemento DOM per ciascun elemento e attendere finché non è necessario visualizzarlo prima di inserirlo nel corpo del documento. Ad esempio,

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

... e poi più tardi, quando si sa che le immagini sono pronte per essere inserite ...

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

Ciò risultato nel file ottenere 'precaricato' in i browser moderni che ho provato e potrebbero effettivamente essere più coerenti con i tuoi stili di codifica, ma sono ancora preoccupato che alcuni browser non caricino l'immagine al momento della creazione dell'elemento, ma attendi fino a quando non viene aggiunta al corpo del documento. Quindi ho optato per utilizzare la soluzione esatta che hai menzionato. Almeno fino al prossimo aggiornamento di ECMAScript, non c'è niente di sbagliato in "old code" (almeno vecchio codice come new Image()). Funziona e doveva funzionare in questo modo. Non penso che sia particolarmente hacky.

[Modifica] Il secondo blocco di codice deve essere eseguito per essere eseguito quando si è sicuri che le immagini sono state caricate e/o quando l'utente fa ciò che si aspetta che faccia scattare il proprio aspetto.