j-LazyImages

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

Good to know:

The component tries to find all <img elements with data-src="" attribute and if the element is visible then the component will update src="" attribute with the value from data-src="" attribute.

Configuration:

type {String} a type (position or offset) for obtaining of position (default: position)
offsetter {String} optional, a parent selector for obtaining of position
customscrollbar {Boolean} have you used a custom scrollbar? (default: false)

Use it with <ui-component name="lazyimages">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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>