j-LazyContent

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Αυτό το συστατικό εμφανίζει το δικό του περιεχόμενο όταν είναι ορατό. υποστηρίζει χρήσιμες λειτουργίες όπως redraw και hide.

ΕΠΙΤΡΟΦΗ:

height:NUMBER_IN_PIXELS" προαιρετικό, ένα πρότυπο ύψος περιεχομένου. Default value: είναι το ύψο του τρέχοντος στοιχείου
Το init:method_or_variable" εκτελείται όταν το στοιχείο είναι ορατό για πρώτη φορά (επιλεκτικά)
Το redraw:method_or_variable" εκτελείται όταν το στοιχείο είναι ξανά ορατό (επιλεγμένο)
Το hide:method_or_variable" εκτελείται όταν το στοιχείο κρύβεται (επιλεκτικά)

Σημειώσεις:

Το init θα εκτελεστεί μόνο μία φορά
Το redraw και το hide θα εκτελούνται περισσότερες φορές
Εάν τα χαρακτηριστικά περιέχουν σύνδεση με variable (όχι μεθόδους), τότε η τιμή Boolean αποθηκεύεται ως τιμή.
important: η περιοχή στρογγυλής πρέπει να είναι το στοιχείο document.body

Χρησιμοποιήστε το με <ui-component name="lazycontent">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

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>