Lakukan Sesuatu Kalau Elemen Mencapai Area Terlihat

Published by Concept Phone Rabu, 18 Juli 2018

Kode ini dipakai untuk mengeksekusi suatu perintah kalau elemen telah mencapai area terlihat pada layar. Semacam prinsip yang biasanya dipakai 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 dipakai dalam peraturan kondisi menyerupai 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=" do something if the element reaches the visible area on the window Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat" data-src="images/image-1.jpg"> <img src="" alt=" do something if the element reaches the visible area on the window Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat" data-src="images/image-2.jpg"> <img src="" alt=" do something if the element reaches the visible area on the window Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat" data-src="images/image-3.jpg"> <img src="" alt=" do something if the element reaches the visible area on the window Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat" 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

Sumber https://www.dte.web.id/