In uno di My Layout ci sono alcune immagini di grandi dimensioni (provenienti da XML) che vengono mostrate quando il mouse passa su alcuni link, ma quando la pagina viene caricata e quando si esegue il rollover ci vuole del tempo per caricare quell'immagine.Come precaricare le immagini senza Javascript?

Nota: ci sono fix 5 immagini (non dinamici)

non voglio usare JavaScript per precaricare immagini eventuali soluzioni?

Non sto usando il menu al passaggio del mouse o qualcosa del genere, ma queste immagini sono immagini del prodotto ei collegamenti sono link di testo ho ottenuto il mio punto ??

fonte

2009-05-04 Wasim Shaikh

@tharkun come è un duplicato. Quelli sono "con"; questo è "senza". –

woa, mio male! steretypes! scusa! – markus

vedere - http://stackoverflow.com/q/1373142/104380 – vsync

Da http://snipplr.com/view/2122/css-image-preloader

A low-tech, ma tecnica utile che utilizza solo i CSS. Dopo aver posizionato il css nel tuo foglio di stile, inserisci questo appena sotto il tag body della tua pagina: Ogni volta che le immagini vengono referenziate nelle tue pagine, verranno caricate dalla cache.

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

}

fonte

2009-05-04 11:56:53

Grazie mille AZIZ. Questa è davvero una buona soluzione per il precarico. Ancora sperando in ulteriori soluzioni. Quindi chiudi la risposta, –

+13

questo NON FUNZIONA più. solo l'ultimo URL vuoto() viene analizzato. – vsync

fantastico !!!!!!!!!!! – SpaceDog

Riferimento delle immagini in tag img invisibili. anche durante il caricamento della pagina verranno scaricati.

fonte

2009-05-04 09:00:28 Canavar

Non puoi aggiungerli come tag <img /> alla tua pagina e nasconderli usando css?

fonte

2009-05-04 09:01:16 Peter

= lag (in alcuni browser) –

Si potrebbe utilizzare un div nascosti per mettere le immagini in. Come così

<html> 
<body> 
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden"> 
    <img src="img1.jpg" /><img src="img2.jpg" /> 
</div> 
<div>Some html</div> 
</body> 
</html>

Questo funziona solo per le immagini, però, vale a dire. se stai cercando di fare lo stesso per dire file .swf, ci saranno problemi. Firefox non esegue il file .swf se non è visibile.

fonte

2009-05-04 09:03:43

Non ti servirà anche la visualizzazione: nessuno poiché la visibilità occuperà ancora spazio? Ma credo anche che alcuni browser non caricino le immagini nascoste finché non vengono mostrate. –

Questa è davvero una buona soluzione, possiamo anche usare la posizione assoluta e; altezza: 0 in CSS, non è vero? –

Se non viene caricato quando nascosto, potrebbe essere utile avere un intervallo "visibile"/div di altezza 0 con style = "background: url (imgx.jpg)"? Solo un'idea ... non so se aiuta o funziona: p – Svish

Non è necessario precaricare le immagini. Non riesco a capire perché il 99% delle persone pensa che gli effetti al passaggio del mouse debbano usare 2 immagini. Non c'è bisogno di questo, e l'uso di 2 immagini lo rende brutto. L'unica buona soluzione che so è usare CSS per elementi A (o JS facile per tutti gli altri pulsanti). Quando il pulsante ci passa sopra, imposta la posizione dello sfondo su un offset.

a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); } 
a:hover { background-position:0 26px }

Questo è tutto, immagine utilizzata potete vedere qui sotto:

alt text http://www.margonem.pl/img/b_tagsdesc.png

Edit: è anche possibile utilizzarlo in altro modo. Invece di cambiare immagine, puoi nascondere la tua immagine. Quindi il punto di partenza sarebbe "background-position: 0 -100px" e al passaggio del mouse "0 0".

Questa tecnica è chiamata sprite CSS - qui è buona descrizione di esso: http://css-tricks.com/css-sprites/

fonte

2009-05-04 09:12:18 Thinker

Non riesco a sottolinearlo abbastanza. Questa è la (unica) strada da percorrere. – Kriem

Grazie .. per la spiegazione –

Bel campione compatto. Mi ha aiutato molto a farlo in questo modo. – Marc

Come io non sono sicuro se le immagini nascoste vengono caricate, probabilmente si vorrà utilizzare image sprites. Quindi l'intera immagine viene caricata prima che venga visualizzato qualsiasi elemento. Puoi persino inserire tutti gli elementi del menu in un'immagine e quindi salvare molte richieste HTTP.

fonte

2009-05-04 09:20:44

Una tecnica non ho visto detto ancora qui, che funziona alla grande se non è necessario preoccuparsi di IE6 & 7, è quello di utilizzare il :after pseudo-selettore per aggiungere le immagini come content a un elemento nella pagina.Codice qui sotto sollevato da this article:

body:after { 
    content: url(img01.jpg) url(img02.jpg) url(img03.jpg); 
    display: none; 
}

L'unico aspetto negativo che posso vedere a questo rispetto all'utilizzo di JavaScript per precaricare le immagini è che non v'è alcun modo semplice per liberarli dalla memoria.

fonte

2012-07-08 18:01:57

Questa è la risposta, l'unico modo giusto per farlo. – vsync

Mentre questo funziona per lo più, alcuni browser (ad esempio Opera) non scaricheranno le immagini per la visualizzazione: nessun elemento. http://www.quirksmode.org/css/displayimg.html –

Puoi comunque includerlo senza visualizzarlo ma posizionarlo all'esterno dell'area disegnata: 'background-position: -100px -100px;'. –

HTML5 ha un nuovo modo per farlo, link prefetching.

<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

Basta aggiungere molti link tag di cui hai bisogno nel tuo codice HTML e siete a posto. Naturalmente, i browser più vecchi non caricheranno il contenuto in questo modo.

UPDATE

Se il server viene servito con HTTP2, si può anche aggiungere un'intestazione Link nella reazione di fare uso di HTTP2 Server Push.

Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;

fonte

2013-09-16 17:55:54

Se il precaricamento delle immagini è ciò che si cerca, le prestazioni sono ciò che si desidera. Dubito di bloccare la pagina mentre il carico delle risorse è quello che vuoi. Quindi, basta posizionare alcuni collegamenti di prefetching alla fine del corpo e aggiungere loro il falso media per farli apparire non importanti (in modo che vengano caricati dopo tutto il resto). Quindi aggiungi il tag onload a quei link e in questo onload sarà il codice che imposta l'origine della risorsa effettiva nella tua pagina. Ad esempio, questo potrebbe essere usato anche in combinazione con iframe dinamici.

Prima:

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'"> 
 
    Click here to toggle it 
 
</a><br /> 
 
<iframe id="myFrame" src="" style="opacity: 0"></iframe>

Dopo:

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity"> 
 
    Click here to toggle it 
 
</a><br /> 
 
<iframe id="myFrame" src="" style="opacity: 0"></iframe> 
 
<link rel="prefetch" href="http://jquery.com/" 
 
     onload="myFrame.src=this.href" media="bogus" />

Si noti come la prima (prima) si blocca la pagina e lampeggia in un modo abbastanza brutto mentre il secondo (dopo) con il contenuto precaricato non blocca la pagina o lampeggia, anzi appare e scompare senza interruzioni all'istante.

fonte

2017-04-21 01:22:28

Come precaricare le immagini senza Javascript?

risposta

Prima:

Dopo:

Problemi correlati