Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat
Kode ini digunakan untuk mengeksekusi suatu perintah jika elemen telah mencapai area terlihat pada layar. Semacam prinsip yang biasanya digunakan pada plugin-plugin lazyLoader
gambar dan infiniteScroll
:
function isScrolledIntoView(elem) {
var $window = $(window),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $(elem).offset().top,
elemBottom = elemTop + $(elem).outerHeight();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
Sampel Penggunaan
Umumnya digunakan dalam peraturan kondisi seperti ini:
if (isScrolledIntoView('#element')) {
$('#element').addClass('here-it-is');
}
Penggunaan pada Elemen Banyak
$('div').each(function() {
if (isScrolledIntoView(this)) {
$(this).addClass('here-it-is');
} else {
$(this).removeClass('here-it-is');
}
});
Contoh Lain: Image Lazy Loader
HTML
<img src="" alt="Loading..." data-src="images/image-1.jpg">
<img src="" alt="Loading..." data-src="images/image-2.jpg">
<img src="" alt="Loading..." data-src="images/image-3.jpg">
<img src="" alt="Loading..." data-src="images/image-4.jpg">
jQuery
$(window).on("scroll", function() {
$('img').each(function() {
if (isScrolledIntoView(this)) {
$(this).attr('src', $(this).data('src')).removeAttr('data-src');
}
});
});
Sumber: Lupa! :p
Labels: Gambar, JavaScript, jQuery, Potongan
7 Comments:
Luar biasa, pengen buat kreasi apa ya dengan yg satu ini.. hmmm..
Itu bisa untuk semua-nya ngak bang..??
owh baru keliatan pada saat di scroll.
PR 3 nih :D
gunanya selain buat lazyload img apa mas? :D
Bisa, asalkan elemennya melintang.
Bikin JQuery WayPoint pakai ini! :-bd
http://imakewebthings.com/jquery-waypoints/
waypoint untuk apa bung?
oiya, ada cara lain untuk menampakkan teks loading selain di tag "alt" tidak?
misal dimasukkan di javascriptnya dan tag "alt"nya penjelasan gambar seperti biasanya..
tolong buat kan donk mas kalau bisa.. :D
Post a Comment
<< Home