Resimlerin çok fazla kullanıldığı haber sitesi, e-ticaret sitesi veya galeri gibi sitelerde görmüşsünüzdür sayfayı aşağı kaydırdıkça resimlerin yüklenmesi olayını işte bunu jquery eklentisi olan lazy ile sağlayacağız.
Jquery (LAZY LOAD IMAGES) Sayfa Aşağı Kaydıkça Resimlerin Yüklenmesi
Kütüphane bir jquery kütüphanesi olduğu için jquery ile beraber lazy kütüphanesini aşağıdaki gibi tanımlamalısınız.
1 2 | <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> |
Scriptleri ekledikten sonra kullanacağımız resimleri sayfaya ekliyoruz.
1 2 3 4 | <img class="lazy" src="arkaplan1.jpg" width="320" data-original="resim1.jpg" /> <img class="lazy" src="arkaplan2.jpg" width="320" data-original="resim2.jpg" /> <img class="lazy" src="arkaplan3.jpg" width="320" data-original="resim3.jpg" /> <img class="lazy" src="arkaplan4.jpg" width="320" data-original="resim4.jpg" /> |
data-original kısmına yüklenecek olan resmin yolunu, src kısmına ise yüklenmeden önce görülecek resmin yolunu veriyoruz.
Resimlere lazy-loading uygulamak için aşağıdaki script kodunu yazıyoruz.
1 2 3 4 5 6 7 | <script> $(document).ready(function() { $("img.lazy").lazyload({ effect : "fadeIn" }); } </ script> |
Eklentiyi indirmek için buraya tıklayın.
çok güzel bir makale.
faydalı bilgiler için eline saglık kardeşim
Rica ederim beğenmiş olmanıza sevindim.
eeee sonra
Özür dilerim verilerimin taşınması sırasında bazı aksaklıklar yaşandığından böyle bir sorun oluştu ilgili veri düzeltildi.