Twenty20 eklentisi lazy load sorununun çözümü! EDIT: Eklentinin 1.5.6 sürümünde bu sorun çözülmüştür.

WordPress sisteminde resimler için lazy load kullanıyorum. Kısa bir süre önce after before resim gösterimi için kullandığım Twenty20 Image Before-After eklentisini test ettiğimde; resimler lazy load olarak yüklendiğinden dolayı eklentinin doğru çalışmadığını gördüm. Aşağıdaki gibi bir görüntü oluşmaktaydı.

Bunu çözmek içinde JS tarafında lazy load olan resimlerin yüklendiğinde twenty20 eklentisini tekrar tetikleyen küçük bir ekleme yapmam gerekti. Eğer sizde böyle bir sorun yaşıyor iseniz aşağıdaki kod bloğunu eklemeniz yeterli olacaktır.

/*====== LazyLoad Twenty20 ======*/
$(function () {
	// Load images after lazy loading function runs
	$('.twenty20 img[data-lazy-src]').on( 'load', function(){
		$(window).trigger("resize.twentytwenty")
	});
	$('.twenty20 img[data-lazy-type]').on( 'load', function(){
		$(window).trigger("resize.twentytwenty")
	});
	$('.twenty20 img.lazy-loaded').on( 'load', function(){
		$(window).trigger("resize.twentytwenty")
	});
});

Bir Cevap Yazın