HTML image loader, this component if the lazy loading of the browser is available it will use it, otherwise it will create an IntersectionObserver to find the scroll position and thus display the image at the precise moment. You can configure which is the scroll target if it was not the body
To use
lazy loading
you must specifysrcset
as attribute instead ofsrc
.
<!-- Lazy loading -->
<ct-img srcset="https://example.com/img.png" lazy></ct-img>
<!-- Lazy loading with custom scroll target (viewport) in lit-element -->
<ct-img srcset="https://example.com/img.png" lazy .viewport="${this.customEleent}"></ct-img>
<!-- Lazy loading with custom scroll target (viewport) in vanilla-->
<ct-img id="img" srcset="https://example.com/img.png" lazy></ct-img>
<script>
document.getElementById('img').viewport = document.getElementById('scrollTarget');
</script>
<!-- background size: contain -->
<ct-img src="https://example.com/img.png" contain></ct-img>
| Attribute | Type | Description |
| --------------------- | --------- | --------------------------- | --------------------- |
| background-position
| 'left' | 'right'
| Position of Backgroud |
| contain
| Boolean
| For contain background size |
Property | Attribute | Type | Default |
---|---|---|---|
$ |
{ [x: string]: any; } |
||
alt |
alt |
string |
"" |
lazy |
lazy |
boolean |
false |
onErrorSrc |
onErrorSrc |
string |
"'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg\" viewBox="0 0 24 24"><path fill="#CCC" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>')" |
placeholderImg |
placeholderImg |
string |
"" |
round |
round |
boolean |
false |
src |
src |
string |
"" |
srcset |
srcset |
string | undefined |
|
viewport |
viewport |
HTMLElement |
"body" |
Method | Type | Description |
---|---|---|
$$ |
(name: string): HTMLElement | Element | undefined | null |
Returns the first element that is a descendant of node that matches selectors. |
$$$ |
(name: string): NodeListOf<HTMLElement | Element> | undefined |
Returns all element descendants of node that match selectors. |
deepClone |
(ob: object): any |
Clone all native types of object in a new object referenceob: Original Object |
deleteAt |
(listTarget: string, index: number): void |
Delete item in list listTarget: List Target index: Index |
fire |
(name: string, value: any): void |
Fire a event with name and value |
insertAt |
(listTarget: string, index: number, el: any): void |
Insert Object in list at index listTarget: List Target index: Index el: Object |
mapIDs |
(): void |
Map all IDs for shadowRoot and save in this.$ like a polymer element.You should add in the first line of firstUpdated()
|
move |
(array: any[], old_index: number, new_index: number): void |
Move item in array array: Array object old_index: Old Index new_index: New Index |
push |
(name: string, value: any): void |
Set Value and fire event with the same name |
scrollToY |
(scrollTargetY?: number | undefined, time?: number | undefined, easing?: "easeInOutSine" | "easeOutSine" | "easeInOutQuint" | "easeInOutCubic" | undefined, target?: Element | undefined): void |
scrollTargetY: pixels to scroll. Ej: const ticketsBlockPositionY = this.$.contact.getBoundingClientRect().top + window.scrollTarget.scrollTop; time: Time to scroll target: scrollTarget Element |
set |
(name: string, value: any): void |
Set Value and fire event with the same name |
setAt |
(listTarget: string, index: number, el: any): void |
|
splice |
(name: string, index: number, pos: number, value: any): void |
Set Value and fire event with the same name |