2012-01-19 32 views
5

Sto cercando di dissolvere l'immagine di sfondo quando un visitatore arriva al sito ma non quando ha già quell'immagine nella sua cache. Qualcosa in questo senso:Fai qualcosa se un'immagine non è stata caricata (jquery)

  1. Verificare se un'immagine di sfondo è già nella cache.
  2. Se è quindi mostrarlo.
  3. Se non è poi nasconderlo e quando viene caricato, dissolvenza in

utilizzando jQuery posso nasconderlo e poi svanire in quando carica:.

$("#bkg img").hide(); 

$('#bkg img').load(function() { 
$(this).fadeIn(); 
}); 

Ma come faccio questo condizionale in modo che accada solo se l'immagine non è già memorizzata nella cache?

Tutto ciò che ho trovato nei forum si attiva quando un'immagine finisce di caricarsi. Come posso farlo attivare perché non è caricato?

Grazie per qualsiasi aiuto, Lernz

@Sima basato sul codice da that other thread Ho fatto che per quanto riguarda la seguente - ma non sembrano avere alcun effetto. Se si riesce a vedere dove sto andando male sarebbe fantastico:

var storage = window.localStorage; 
if (!storage.cachedElements) { 
storage.cachedElements = ""; 
} 

function logCache(source) { 
if (storage.cachedElements.indexOf(source, 0) < 0) { 
    if (storage.cachedElements != "") 
    storage.cachedElements += ";"; 
     storage.cachedElements += source; 
    } 
} 

function cached(source) { 
    return (storage.cachedElements.indexOf(source, 0) >= 0); 
} 

var plImages; 

//On DOM Ready 
$(document).ready(function() { 
    plImages = $("#fundo-1 img"); 

    //log cached images 
    plImages.bind('load', function() { 
     logCache($(this).attr("src")); 
    }); 

    //display cached images 

    plImages.each(function() { 
    var source = $(this).attr("src") 
    if (!cached(source)) { 
     $(this).hide().fadeIn(); 
    } 
    }); 

}); 

risposta

2

si può provare:

if(!$('#bkg img')[0].complete) { 
    $('#bkg img').hide().load(function() { 
     $(this).fadeIn(); 
    }); 
} 

https://developer.mozilla.org/en/DOM/HTMLImageElement

+0

Non dimenticarsi di '.hide()' prima (all'interno di 'se'). :) –

+1

Sì, * solo * modificato in. Dang, lungo giorno e settimana, porta venerdì. – karim79

+0

wow che sembra fantastico :) – simekadam

0
$("#bkg img").hide();  
var imgCount=$("#bkg img").length; 
$('#bkg img').load(function(){ 
    if(!--imgCount){ 
     $('#bkg img').fadeIn(); 
      // your code after load 
    } else { 
     // your code onloading time 
    } 
}); 
0

penso che non è così facile come sembra, here dovrebbe essere una soluzione ..

+0

Questo è eccellente ma ho difficoltà a farmi girare la testa. Voglio chiedere se $ ("# bkg img") esiste all'interno di window.localStorage.cachedElements giusto? Lasciami fare un tentativo ... – Learnz

+0

Ok, non ho capito. Qualcuno ha altre idee? – Learnz

+1

No .. Dovresti prima controllare il window.localStorage se, c'è la tua stringa sorgente (secondo la soluzione collegata) e poi se non è memorizzato lì, dovresti associare il gestore di eventi load con il codice fadeIn, altrimenti non fare nulla e lascia che si mostri normalmente. In realtà non esiste l'immagine stessa, ci sono solo informazioni persistenti, se l'immagine è stata caricata in qualsiasi momento (fingiamo che se sì, dovrebbe essere nella cache ..) – simekadam

Problemi correlati