Yalnızca görüntülerin tembelce yüklenmesi değil web sayfaları çağın performansına yardımcı olur, ama aynı zamanda yardımcı olur Arama Motoru Optimizasyonu gözlemlendiği gibi. Kullanabilirsiniz jQuery ve hatta Mootools tembel yükleme görüntüleri için. Resimler, yalnızca onlara kaydırdığınızda görünecektir.
Bu jQuery ipucu, sayfayı yüklerken birçok harici isteği azaltır ve sonuçta WordPress blogunuzun daha hızlı yüklenmesine yardımcı olur. Bu hileyi kullanırken sayfa yüklemeyi basitleştirmek için Cache Technique'i de kullanmalısınız.
İçerik
Tembel Yükleme nedir?
Tembel yükleme, içeriğin hepsini bir kerede indirmek yerine ihtiyacınız olduğu kadar indirdiğiniz zamandır.
Tembel yükleme, internette kullanılan bir optimizasyon tekniğidir. Web sayfasının yalnızca ilk başta ihtiyacınız olan bölümünü yükler ve siz üzerlerine tıklayana kadar diğer bölümleri yüklemez. Bu şekilde, baştan sona tüm bilgileri yüklemek zorunda kalmaz.
Tembel yüklemenin bir biçimine sonsuz kaydırma denir. Bu, sayfayı aşağı kaydırdıkça daha fazla içeriğin otomatik olarak yükleneceği anlamına gelir.
Tembel yükleme neden önemlidir?
Bir web sayfasının devasa yükü resimler, komut dosyaları, stil sayfaları, yazı tipleri ve videolarla doludur. Görüntüler % 60'un üzerinde artış tipik bir web sayfasının boyutu. Bir web sayfasının tasarımı için önemli oldukları için onlardan kurtulmak mümkün değildir.
Herhangi bir optimizasyon olmadan, web tarayıcınız sayfayı oluşturmadan önce her şeyi indirir. Bu, sayfanın daha yavaş yüklenmesini sağlar.
Web sayfalarınızın daha hızlı yüklenmesini sağlamak için elinizden geleni yapmak mantıklıdır. Ve görseller söz konusu olduğunda, bir web sitesinin boyutuna en büyük katkıyı yapanlardır.
Yani onlarla başlarsanız, bu iyi bir fikir çünkü o zaman web siteniz hızlı yüklenir. Gecikmeli yüklemenin kullanışlı olduğu yer burasıdır, çünkü herhangi bir zamanda yalnızca sayfanızda görüntülenen bir görüntünün bölümlerini indirir.
JQuery ile Tembel Yükleme nasıl kurulur?
Basit şeyleri gerçekleştirmenize izin veren eklentiler var, ancak ne kadar az eklenti kullanırsanız blogunuz o kadar verimli olur.
Hangi WordPress temasını kullandığınız önemli değil, tembel yüklemeyi çok kolay bir şekilde uygulayabilirsiniz.
Bu sadece iki adımlı bir eğitimdir, biri jQuery eklemek için diğeri ise WordPress blogunuza belirli görüntüleri tembelce yüklemek istiyorsanız img etiketine bir sınıf atamak içindir.
İşte temanızın komut dosyalarına eklemeniz gereken jQuery işlevi.
/* lazyload.js (c) Lorenzo Giuliani * MIT Lisansı (http://www.opensource.org/licenses/mit-license.html) */ !function(pencere){ var $q = function(q, res) { if (document.querySelectorAll) { res = document.querySelectorAll(q); } else { var d=belge , a=d.styleSheets[0] || d.createStyleSheet(); a.addRule(q,'f:b'); for(var l=d.all,b=0,c=[],f=l.length;b= 0 && rect.left >= 0 && rect.top ) } var images = new Array() , sorgu = $q('img.lazy') , processScroll = function(){ for (var i = 0; i < images.length; i++) { if (elementInViewport(images[i])) { loadImage(images[i], function () { görüntüler.splice(i, i); }); } }; } ; // Array.prototype.slice.call, güzel IE8'imiz altında (var i = 0; i < sorgu.uzunluk; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll); }(Bugün nasılsın);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
Görüntülerin Tembel yüklenmesini dinamik olarak uygulamak için jQuery işlevini şu şekilde çağırabilirsiniz. jQuery işlevini kullanarak yüklemek istediğiniz her görüntü için tembel sınıfı kullanmanız gerekir.
Sonuç
Lazyload, blogunuz veya kurumsal web siteniz için iyi bir şeydir. SEO ile yardımcı olur ve Google bunu görebilir. Ancak bunun için endişelenmenize gerek yok çünkü onlar tembel yüklemenin nasıl çalıştığını biliyorlar.
Ayrıca animasyonu değiştirerek ve bir gecikme ekleyerek istediğiniz gibi özelleştirebilirsiniz.
Merhaba,
Bu iyi bir bilgidir ve çok faydalıdır. Tembel Görüntüleri göstermek için temaları kullandığım için çok yardımcı oldu.
İyi Çalışmalar ve Devam Et…!