jQuery: Nesnenin Görünüp Görünmediğini Kontrol Etme

Yükleniyor

jQuery candır!

jQuery, az kod yazarak DOM elementlerine kusursuz bir kontrole sahip olmamızı sağlıyor. Bu yazımda, jQuery sayesinde bir DOM elemanının kullanıcının ekranında görünüp görünmediğini kontrol etmeyi anlatacağım.

Öncelikle fonksiyonu yazalım, sonra açıklayalım.

$.fn.gorunuyor_mu = function(){
     
    var win = $(window);
     
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();
     
    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();
     
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
     
};
yuklendi = false;
if( $('.hedef-eleman').length > 0 ) { // hedef eleman sayfada var mı?
	if( $('.hedef-eleman').gorunuyor_mu() && yuklendi == false ) { // sayfa yüklendiğinde hedef eleman görünüyor mu?
        // görünüyor, bir şeyler yap
			yuklendi = true;
		});
	} else {
        // ekranda yok.
	}
}
$(window).scroll(function() { // sayfada aşağı-yukarı gidildiğinde kontrol yap:
	if( $('.hedef-eleman').length > 0 ) { // hedef eleman sayfada var mı?
		if( $('.hedef-eleman').gorunuyor_mu() && yuklendi == false ) { // hedef eleman göründü mü?
        // göründü, bir şeyler yap.
			yuklendi = true;
		});
		} else {
			// görünmüyor.
		}
	}
});
  • 1-18 satırlarında $('.eleman').gorunuyor_mu() fonksiyonunu tanıttık.
  • 19. satırda yuklendi isimli değişkenimizi, hedef elemanımız her göründüğünde tekrar tekrar işlem yapılmasın diye kullanıyoruz. Eğer eleman her göründüğünde işlem yapmak istiyorsanız (örneğin bir animasyon başlatmak vb), 25 ve 35. satırları silmeniz gerekli.
  • 22 ve 32. satırlar hedef elemanımız göründüğünde yapılmasını istediğimiz işlemleri, çalıştırılacak fonksiyonları yazacağımız satırlar.
  • 20-28 satırlar, sayfa yüklenince hedef elemanımızın görünüp görünmediğini kontrol ediyor.
  • 29-39 satırlarda ise sayfada aşağı-yukarı gidildiğinde gerekli kontrolü yapıyor.
  • Kullanım

    Kullanmak için, yapılacak işlemleri 22 ve 32. satırlara yapıştırın. Örneğin bir AJAX sorgusu yaparak hedef elemanınız ekranda görünüyorsa/görünmeye başladığında sorguyu yapıp bu hedef elemana ekleme yapabilir, sayfa yükleme hızınıza katkıda bulunabilirsiniz. Youtube’da yeterince aşağı inmeden yorumların yüklenmediğini fark etmişsinizdir heralde.

    Kapanış

    Kaynağı şurası olan bu faydalı fonksiyonu, kullanım şeklini ekleyerek ve sadece bir kere çalıştırılabilecek şekilde düzenleyerek paylaştım. Fonksiyonla ilgili öneri ya da sorunuz varsa yorum göndermekten çekinmeyin.

    Okuduğunuz için teşekkürler.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir