2011-03-18 11 views
5

Sto pre-caricando alcune immagini e quindi li utilizzo in una lightbox. Il problema che ho è che anche se le immagini si stanno caricando, non vengono visualizzate dal browser.Immagini precaricate non visualizzate in Chrome

Questo problema è specifico di Chrome. È persistito tramite Chrome 8 - 10, e ho cercato di spegnerlo per ripararlo tutto questo tempo e non ho ottenuto nulla.

Ho letto queste domande simili,
Chrome not displaying images though assets are being delivered to browser
2 Minor Crossbrowser CSS Issues. Background images not displaying in Google Chrome?
JavaScript preloaded images are getting reloaded

che tutti i dettagli comportamento simile, ma in Chrome per Mac. Mentre questo sta accadendo in Windows.

  • Tutti gli altri browser sembrano essere a posto.
  • Se hai aperto Firefox e Chrome, carica la pagina in Firefox, quindi in Chrome, vengono visualizzate le immagini.
  • Dopo aver caricato manualmente le immagini, utilizzando la barra degli strumenti thingy Webkit webdev, essi mostrano sempre
  • Tutti i link delle immagini e quali sono belle e lavorare
  • Cancellazione di tutto, dai Chrome non sembra fare alcuna differenza (cache, cronologia, ecc.)

Se qualcuno ha qualche idea sarebbe incredibilmente utile, dato che sono letteralmente tutte le opzioni disponibili qui.

PS, mi scuso se ci sono risposte tardive, sono in vacanza per una settimana domani! : D

Aggiornamento Ecco la funzione javascript che precarica le immagini.

var preloaded = new Array(); 
function preload_images() { 
    for (var i = 0; i < arguments.length; i++){ 
     document.write('<'); 
     document.write('img src=\"'+arguments[i]+'\" style=\"display:none;\">'); 
    }; 
}; 

Aggiornamento
Sto ancora avendo problemi con questo, e ho rimosso tutto il precarico funzione di immagini. Forse consegnare un foglio di stile tramite document.write() non è il modo migliore?

+0

Mente incollando un codice così vediamo come si sta precarico? – jlindenbaum

risposta

5

Chrome potrebbe non essergli precaricato mentre sta scrivendo sul DOM senza display, quindi potrebbe essere abbastanza intelligente da rendersi conto che non è necessario renderlo. Prova a modificare:

var preloaded = new Array(); 

function preload_images(){ 
    for (var x = 0; x < preload_images.arguments.length; x++) 
    { 
     preloaded[x]  = new Image(); 
     preloaded[x].src = preload_images.arguments[x]; 
    } 
} 

L'oggetto Immagine Javascript ha un sacco di funzioni utili e che potrebbe risultare utile:

http://www.javascriptkit.com/jsref/image.shtml

OnAbort()

codice è eseguito quando l'utente interrompe il download dell'immagine .

onerror()

codice viene eseguito quando si verifica un errore con il caricamento dell'immagine (es: senza trovato). Esempio (s)

onload() viene eseguito

codice quando l'immagine successo e completamente download.

E quindi si dispone anche della proprietà complete che true/false indica se l'immagine è stata caricata (pre) completamente.

+0

Aggiungerà taglie in 20 ore :) –

+0

@David, ha funzionato per te? Lo ha fatto se lo avesse fatto :) –

+0

Sì, sembra che il pre-caricamento sia un po 'più complicato in Chrome piuttosto che aggiungere le immagini! –

2

Si scopre che Chrome tiene conto della cache HTTP e scarta eventuali immagini precaricate immediatamente dopo il precarico se la cache è impostata in modo errato.

Nel mio caso, sto generando le immagini dinamicamente e per impostazione predefinita la risposta è stata inviata al browser con scadenza immediata.

Per risolvere il problema ho dovuto impostare la seguente sotto:

 Response.Cache.SetExpires(DateTime.Now.AddYears(1)); 
     Response.Cache.SetCacheability(HttpCacheability.Public); 

     return File(jpegStream, "image/jpeg"); 
+0

Stavo generando immagini tramite PHP e stavo pensando perché Google Chrome stava scartando le immagini precaricate. Poi ho scoperto che avevo fissato la data di scadenza in passato. Grazie per le informazioni. – viji

Problemi correlati