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');
    }
});

Lihat Demo

---

Contoh Nyata: 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');
        }
    });
});

Lihat Demo

Sumber: Lupa! :p