Mecha versi 2.6.3 sudah dirilis!

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.