2013-01-18 14 views
7

So di poter caricare l '' immagine 'pigro usando una libreria jquery di terze parti. Esiste un modo per carico pigro qualsiasi cosa come <div> contenitore elemento, ad esempio quando l'utente di scorrimento a quella <div> contenitorecome scaricare lazy load

+2

sembra un duplicato di http://stackoverflow.com/questions/8192651/load-lazy-loading-a-div-whenever-the-div-gets-visible-for-the-first -time – Ragnarokkr

+0

La risposta breve è sì. La risposta più lunga è [cosa hai provato?] (Http://whathaveyoutried.com) –

risposta

5

di espandere Kinsho del (corretto) risposta:

Per motivi di sicurezza e manutenibilità, si dovrebbe diffidare di iniettare codice HTML direttamente in documenti. Ciò potrebbe interrompere i listener di eventi, interrompere il parser DOM e potenzialmente aprire vulnerabilità di sicurezza.

In genere, il modo migliore per caricare pigro è inviare dati codificati (come JSON o XML) al client ed elaborare il risultato di conseguenza. Per l'HTML di base, potrebbe essere utilizzato un templating solution. Anche un iframe può essere migliore di incollare <div><h1>Hello</h1><table><tbody><td><tr>1</td></tr><tr><td>2</td></tr></tbody></table></div> * in un elemento innerHTML.

Inoltre, prima di implementare il caricamento lento per il tuo sito, prenditi un po 'di tempo per valutare se ne vale davvero la pena. Un'ulteriore richiesta HTTP è notevolmente più costosa del semplice download di dati tutti in una volta e qualsiasi HTML immesso tramite Javascript non verrà visualizzato dai crawler di ricerca web. Quindi, se si sta iniettando solo una piccola quantità di informazioni statiche, non ne vale la pena.


* è possibile trovare l'errore di analisi? Ora immagina di farlo per un documento HTML di dimensioni standard.

2

Perché si affidano a qualche libreria di terze parti per facilitare l'pigro carico? Puoi fare bene usando JavaScript nativo.

Infatti, finché si accetta il principio che tutto il caricamento lento viene attivato da un'azione dell'utente, impostare un listener su un oggetto specifico (che si tratti della barra di scorrimento, dell'intestazione di una sezione, ecc.). Imposta un gestore corrispondente che si basa su AJAX (puoi usare jQuery qui) per recuperare i dati (preferibilmente HTML) che puoi caricare direttamente nel contenitore che vuoi usando la proprietà innerHTML dell'elemento contenitore.

0

Ecco ciò che volevi davvero iniziare. È un nuovo plugin jQuery che ho creato io stesso. Puoi "Lazy Load" tutto ciò che vuoi in base a qualsiasi elemento (selettore jQuery) che desideri.

https://github.com/shrimpwagon/jquery-lazyloadanything

+0

Probabilmente sarebbe meglio se includessi esempi di non-immagine nella tua documentazione. Descrivi come caricare pigro un'immagine tramite data-src ma in realtà non spieghi come caricare pigro un div, per esempio. Un div non ha dati-src. –

+0

L'attributo 'data' è una nuova specifica HTML5 che si applica a qualsiasi elemento. Ma sì, ho bisogno di fare un esempio di pagina. Vuoi farlo per me? – shrimpwagon