j-LazyLoad

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Può essere utilizzato per tutto
Posizione solo verticale

Configurazione:

container {String} un selettore come contenitore di scorrimento (default: window)
selector {String} (importante) selettore per gli elementi lazi
exec {String} un collegamento al metodo, eseguito se l'elemento liscio è visibile
offset {Number} Questo valore estende la dimensione della zona di scorrimento in alto/in basso. (default: 50)

Metodi:

instance.refresh() Riflessioni di stato

Utilizzare con <ui-component name="lazyload">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

example.html

<ui-component name="lazyload" config="selector:.lazyload;exec:lazyload" style="height:1000px">
	<div>SCROLL DOWN</div>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<div class="lazyload"><img src="https://componentator.com/img/preloader.gif" data-src="https://componentator.com/img/logo.png" /></div>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
</ui-component>

<script>
	function lazyload(el) {
		var img = el.find('img');
		img.attr('src', img.attr('data-src'));
	}
</script>