j-LazyImages

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Goed om te weten:

De component probeert alle <img-elementen met de data-src="" attribute te vinden en als het element zichtbaar is, zal de component de src=""-attribute bijwerken met de waarde van het data-src=""-atribute.

Configuratie:

type {String} een type (position of offset) voor het verkrijgen van de positie (default: position)
offsetter {String} optioneel, een ouder selecteur voor het verkrijgen van de positie
customscrollbar {Boolean} Heb je een custom scrollbar gebruikt? (default: false)

Gebruik het met <ui-component name="lazyimages">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

example.html

<ui-component name="lazyimages">

	<div>SCROLL DOWN</div>
	<div style="height:1000px"></div>

	<!-- EMPTY GIF -->
	<!-- YOU CAN USE ENCODED SVG WITH PREDDEFINED SIZE -->
	<img src="data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://cdn.pixabay.com/photo/2019/08/26/01/13/pacific-4430530_1280.jpg" />

</ui-component>