j-LazyImages

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Bra att veta:

Komponenten försöker hitta alla <img-element med data-src=""-attribut och om elementet är synligt uppdaterar komponenten src=""-attributen med värdet från data-src=""-attributet.

Konfigurera:

type {String} en typ (position eller offset) för att få position (default: position)
offsetter {String} valfritt, en föräldralösare för att få position
customscrollbar {Boolean} Har du använt en anpassad scrollbar? (default: false)

Använd den med <ui-component name="lazyimages">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>