Resimleri Görünürse Yüklemek

Merhaba !

Farzedelim ki sitenize giren ziyaretçi yavaş bir internete sahip. Haliyle sitenize girdiğinde yüksek çözünürlüklü fotoğrafları hemen görüntüleyemeyecek. O resimlerin olduğu kısımlar boş duracak ve zamanla yüklenecek. Bundan kurtulmak için yükleniyor efekti ile o an sayfada görünen resimleri varsayılan olarak bir gif olarak gösterip, fotoğraf tam olarak yüklendiği zaman gif'in yerini almasını sağlayabiliriz.

Bunun için 2 adet JavaScript kodu hazırlayacağız. İlk fonksiyon, fotoğrafın o an gördüğünüz pencere koordinantları içerisinde olup olmadığını söyleyecek. Diğer fonksiyonumuz ise görüntünün gösterilmesini sağlayacak.

HTML Kısmı

Sayfamıza yerleştireceğimiz resimlerin src kısmına, resim yüklenmeden önce görüntülemek istediğimiz gif'i koyacağız. data-src kısmına ise, asıl fotoğrafı koyacağız.

Bu resimlerin html kodlaması ise aşağıdaki gibi yapalım.

<img src="img/loading.gif" data-src="img/ayasofya.jpg" width="250" height="250" />

isVisible() Fonksiyonu

Bu fonksiyonun görevi, resmin koordinantlarının sayfa içerisinde olup olmadığını söylemek. topVisible ve bottomVisible değişkenleri, eğer resim sayfada görünüyor ise true değerini, görünmüyor ise false değerini döndürecek.

function isVisible(img) {
	var coords = img.getBoundingClientRect();
	var windowHeight = document.documentElement.clientHeight;
	var topVisible = coords.top > 0 && coords.top < windowHeight;
	var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
	return topVisible || bottomVisible;
}

showVisible() Fonksiyonu

Bu fonksiyon ise sayfa üzerindeki tüm resimleri tarayıp, isVisible() fonksiyonu yardımıyla sayfada görüntülendiğini anlayıp, src kısmındaki gif'in yerine gerçek fotoğrafın linkini yerleştirecektir.

function showVisible() {
	for (var img of document.querySelectorAll("img")) {
		var realSrc = img.dataset.src;
		if (!realSrc) continue;
		if (isVisible(img)) {
			realSrc += "?=" + Math.random();
			img.src = realSrc;
			img.dataset.src = "";
		}
	}
}

Son olarakta ziyaretçi her scroll yaptığında bu fonksiyonumuzun çalışmasını sağlayalım.

window.addEventListener("scroll", showVisible);
showVisible();

Codepen Canlı Önizleme

Kodların çalışır örneğini görmek için codepen'i linkini inceleyebilirsiniz.

Dikkat edin, ilk olarak animasyon görünecek, o sırada resim yükleniyor; yükleme bittiğinde resim görünür olacak.