jQuery, JavaScript, HTML: come caricare le immagini dopo aver caricato tutto il resto?

hey ragazzi, ho una pagina molto complessa con un sacco di script e un tempo di caricamento piuttosto lungo. In cima a quella pagina voglio implementare il jquery Nivo Slider (http://nivo.dev7studios.com/).

Nella documentazione dice che devo elencare tutte le immagini per il cursore all’interno di un cursore div #

Tuttavia potrei avere 10 immagini con un 1000x400px che è abbastanza grande. Quelle immagini si caricheranno quando la pagina verrà caricata. Dal momento che sono nel mio header questo potrebbe richiedere un po ‘di tempo.

Sto cercando un modo per usare qualsiasi jquery Slider Plugin (come il nivo slider) ma caricare dynamicmente le immagini o caricare tutte quelle immagini dopo che tutto il resto sulla mia pagina è stato caricato.

Qualche idea su come potrei risolverlo?

C’è anche un modo per avviare un processo javascript dopo che tutto il resto della pagina è stato caricato? Se c’è un modo per avere una soluzione per il mio problema (usando il metodo jquery ajax load ()) … Comunque non ho idea di come aspettare il caricamento di tutto il resto e quindi avviare il cursore con tutte le immagini.

Ecco cosa abbiamo fatto e funziona perfettamente. Abbiamo saltato l’impostazione dell’attributo src di img e aggiunto img-location a un attributo falso lsrc . Quindi carichiamo un’immagine dynamic con il valore lsrc e impostiamo l’immagine di immagine reale solo dopo che è stata caricata.

Non si tratta di un caricamento più veloce, ma si tratta di mostrare le immagini solo quando vengono scaricate completamente nella pagina, in modo che l’utente non debba vedere quelle fastidiose immagini a metà caricate. È ansible utilizzare un’immagine segnaposto mentre vengono caricate le immagini effettive.

Ecco il codice.

  $(function(){ $.each(document.images, function(){ var this_image = this; var src = $(this_image).attr('src') || '' ; if(!src.length > 0){ //this_image.src = options.loading; // show loading var lsrc = $(this_image).attr('lsrc') || '' ; if(lsrc.length > 0){ var img = new Image(); img.src = lsrc; $(img).load(function() { this_image.src = this.src; }); } } }); }); 

Modifica: Trick consente di impostare l’attributo src solo quando tale origine viene caricata in img temporanea. $(img).load(fn); lo maneggia

Oltre alla risposta di Xhalent, usa la funzione .append () in jQuery per aggiungerli al DOM:

Il tuo HTML avrebbe solo:

 

E poi il tuo jQuery sarebbe:

 jQuery(function(){ $("#slider").append(''); }); 

controlla l’ evento jquery load (), aspetta tutto incluso la grafica

 $(window).load(function () { // run code }); 

a carico si potrebbe quindi caricare le immagini usando:

 var image = new Image(); image.src = "/path/to/huge/file.jpg"; 

Puoi anche aggiungere una funzione onload all’immagine

 image.onload = function() { ... } 

il modo migliore per usare è b -lazy js . bLazy è uno script di immagine di caricamento lazy leggero (meno di 1.2 KB minified e gzip). Ti consente di caricare in modo lento e multi-servizio le tue immagini in modo da poter risparmiare larghezza di banda e richieste server. L’utente avrà tempi di caricamento più veloci e salverà i dati caricati se lui / lei non sfoglia l’intera pagina. Per un elenco completo di opzioni, funzioni ed esempi, vai al post del blog: http://dinbror.dk/blog/blazy .

Il seguente esempio è un esempio di immagini reattive multi-serving che ricarica pigro con una richiamata di immagini 🙂 Se la larghezza del dispositivo è inferiore a 420 px servirà una versione più leggera e più piccola dell’immagine. Quando un’immagine è stata caricata, rimuove il caricatore nella richiamata.

In Html

  Image description 

In js

 var bLazy = new Blazy({ breakpoints: [{ width: 420 // Max-width , src: 'data-src-small' }] , success: function(element){ setTimeout(function(){ // We want to remove the loader gif now. // First we find the parent container // then we remove the "loading" class which holds the loader image var parent = element.parentNode; parent.className = parent.className.replace(/\bloading\b/,''); }, 200); } }); 

Esempio

jquery ha una syntax per l’esecuzione di javascript dopo che il documento è stato caricato: