# j-LazyImages

> 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.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 977ab4051ff8aaffd743570a30b645bab9c368982590b0a74f9ec2414fb2a6f3
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__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.

```html 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>
```