j-LazyContent

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Deze component toont zijn eigen inhoud wanneer het zichtbaar is.Het ondersteunt nuttige functies zoals redraw en hide.

Configuratie:

height:NUMBER_IN_PIXELS" optioneel, een standaard inhoud hoogte. Default waarde: is de hoogte van het huidige element
init:method_or_variable" wordt uitgevoerd wanneer het element voor het eerst zichtbaar is (optional)
redraw:method_or_variable" wordt uitgevoerd wanneer het element weer zichtbaar is (optional)
hide:method_or_variable" wordt uitgevoerd wanneer het element verborgen is (optional)

noten:

init zal slechts één keer worden uitgevoerd
redraw en hide worden meer keer uitgevoerd
Als de attributen een link bevatten naar variable (niet methoden), dan wordt de waarde van Boolean opgeslagen.
belangrijk: het scrollgebied moet document.body element zijn

Gebruik het met <ui-component name="lazycontent">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

example.html

<div><b>SCROLL DOWN</b></div>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<ui-component name="lazycontent" config="init:method_init;redraw:method_redraw;hide:method_hide">
	.... default content ....
</ui-component>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<ui-component name="lazycontent" config="init:method_init;redraw:method_redraw;hide:method_hide">
	.... default content ....
</ui-component>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />

<script>
	function method_init() {
		this.element.html('INIT');
		this.element.css('background-color', 'green');
	}

	function method_redraw() {
		this.element.html('REDRAW');
		this.element.css('background-color', 'blue');
	}

	function method_hide() {
		this.element.html('HIDDEN');
		this.element.css('background-color', 'red');
	}
</script>