j-LazyImages

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Gut zu wissen:

Die Komponente versucht, alle <img-Elemente mit dem Attribut data-src="" zu finden. Wenn das Element sichtbar ist, aktualisiert die Komponente das Attribut src="" mit dem Wert aus dem Attribut data-src="".

Konfiguration:

type {String} ein Typ (position oder offset) zur Positionsermittlung (Standard: position)
offsetter {String} optional, ein übergeordneter Selektor zum Ermitteln der Position
customscrollbar {Boolean} Haben Sie eine benutzerdefinierte Bildlaufleiste verwendet? (Standard: false)

Verwenden Sie es mit <ui-component name="lazyimages">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>