Şablonunuzdaki resimleri jQuery lazyload uyumlu yapmak

Şablonunuzdaki resimleri WordPress fonksiyonu ile jQuery lazyload uyumlu yapabilirsiniz. Yazıların içerisine eklenen tüm resimlere özel bir tanım atayarak lazyload ile uyumlu bir şekilde çalışmasını ve yazılarınızın yüklemne sürelerini azalmasını sağlayabilirsiniz. Mobil uyumlu siteler çoğaldıkça kullandığımız resimler mobil data yemeye devam etmekte. Bunun yanısıra masaüstü versiyonlarda da çokça resim barındıran siteler yüklenme sürelerinin uzamasını sağlamakta. Bunun önüne geçmek için jQuery lazyload eklentisi birebir diyebilirim. Hatta bootstrap slideri ile ilgili şöyle bir yazı yazmıştım bu konuda. Bunu WordPress sistemini kullanan sisteminize uygulamak ise aşağıda vereceğim fonksiyonla çok kolay.

jQuery Lazyload Kullanımı

Şuradaki linkten edinebileceğiniz lazyload’ın kullanımı oldukça basit. Öncelikle jQuery gerektiğini hatırlatayım.

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.lazyload.min.js" type="text/javascript"></script>

Sonrasında jQuery(document).ready(); içerisinde şu kodu kullanıyoruz.

$("img.lazy").lazyload();

Tabii resimlerimizin de bu sisteme uygun olması gerekiyor.

<img class="lazy" data-original="img/example.jpg" src="grey.gif" width="640" height="480">

Resimlerin özelliğine dikkat edin. Burada normal src alanı için bir tanımlama yapılmış. Bu alanda jquery lazyload eklentisinin çalışabilmesi ve resimleri koda uygun şekilde yükleyebilmek adına 1×1 px boyutlarında grey.gif ya da hiçbir şeyin olmaması gerekmekte. data-original alanına eklenen asıl imaj yolunu tasvir etmekte ve resim buradan yükleniyor. Bunu şablonumuzda da aynı şekilde ekleyebilmek için aşağıdaki fonksiyon bize lazım.

Kod;

Şablonunuzda bulunan functions.php dosyasını açarak en alttaki ?> ibaresindne hemen önce (bu ibare olmayabilir, sıkıntı yok) aşağıdaki kodu sisteminize entegre edin.

Aşağıda belirtilen kod temanızın ve sisteminizin en önemli dosyası olan functions.php dosyasına müdahale gerektirmektedir. Bu dosya wp-content/themes/temanızınadı/ klasöründe bulunmaktadır. Dosyaya müdahale etmeden lütfen yedek alınız.
function lazyload_uyumlu_resimler($content) {
	if (is_single()){
		$resmibul = '/<img(.*?)src="(.*?).(bmp|gif|jpeg|jpg|png)"(.*?)>/i';
		$lazyloadekle = '<img data-original="$2.$3" $1 class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" $4>';
		$content = preg_replace($resmibul,$lazyloadekle,$content);
	}
		return $content;
}
add_filter( 'the_content', 'lazyload_uyumlu_resimler' );

Yukarıdaki kod yazı içerisine eklemiş olduğunuz tüm imajları tek tek bulacak ve onları jquery lazyload uyumlu hale getirecektir. Dikkat ederseniz src tanımına bir ibare ekledim. Bu ibare 64bit kodlamalı 1x1px imaj linkidir, jquery lazyload için gereklidir. Size ise bir yukarıda anlatmış olduğum jquery lazyload eklentisini sisteminize entegre etmek kalacak.

Not: LazyLoad eklentisinin son verisiyonunda ufak sıkıntılar yaşayadığını bildiren bir iki arkadaşım oldu. Onun için benim şablonumda kullandığım versiyonu zipleyip yazı içerisine ekliyorum.

Selametle

 

Comments are closed.