Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat

Tabel Konten
  1. Sampel Penggunaan 
  2. Penggunaan pada Elemen Banyak 
  3. Contoh Lain: Image Lazy Loader 
    1. HTML 
    2. jQuery 
JavaScript/jQuery, do something if the element reaches the visible area on the window.

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

Lihat Demo


Sumber: Lupa! :p

7 Komentar

  • Surga Kenari

    Luar biasa, pengen buat kreasi apa ya dengan yg satu ini.. hmmm..

  • Unknown

    Itu bisa untuk semua-nya ngak bang..??

  • Bayu Handono

    owh baru keliatan pada saat di scroll.
    PR 3 nih :D

  • Putra

    gunanya selain buat lazyload img apa mas? :D

    • Taufik Nurrohman

      Bikin JQuery WayPoint pakai ini! :-bd
      http://imakewebthings.com/jquery-waypoints/

      • Zaenal Abidin

        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

Komentar telah ditutup.