j-LazyLoad

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

Μπορεί να χρησιμοποιηθεί για όλα
Μόνο κάθετα

ΕΠΙΤΡΟΦΗ:

container {String} ένα επιλεκτικό ως δοχείο στρογγυλής (προεπιλεγμένο: window)
selector {String} (important) επιλεκτής για τα ελαφρά στοιχεία
exec {String} μια σύνδεση με τη μέθοδο, που εκτελείται εάν το φαύλο στοιχείο είναι ορατό
offset {Number} Αυτή η τιμή επεκτείνει το μέγεθος της περιοχής στροφής πάνω/κάτω. (προεπιλεγμένη: 50)

Μέθοδοι:

Το instance.refresh() αναζωογονεί την κατάσταση

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

example.html

<ui-component name="lazyload" config="selector:.lazyload;exec:lazyload" style="height:1000px">
	<div>SCROLL DOWN</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 />
	<div class="lazyload"><img src="https://componentator.com/img/preloader.gif" data-src="https://componentator.com/img/logo.png" /></div>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
</ui-component>

<script>
	function lazyload(el) {
		var img = el.find('img');
		img.attr('src', img.attr('data-src'));
	}
</script>