bazı sitelerde sayfayı açtığında ekranda görebildiğin kadar alanı dolduruyo sayfanın hepsini yüklemiyo. sayfayı aşağı kaydırdıkça diğer resimler yükleniyor. bunu nasıl yapabilirim ?

soruldu: 28 Şub '13, 01:04

wifi's gravatar image

wifi
748384454
cevap kabul oranı: 100%

değiştirildi: 28 Şub '13, 01:47

AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

AliRıza Adıyahşi ♦
7.9k146288


JQuery Lazy Loading Kütüphanesini kullanarak yapabilirsiniz.

Örnek kullanım:

JQuery ve Lazyload kütüphanelerini sayfaya referans ediyoruz.

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

Resimlerin sayfa kaydırdıkça yüklenmesi için aşağıdaki scripti yazıyoruz. Sayfaları yüklenme efektini de ayarlayabilirsiniz. Örneğin aşağıdaki ayarla fade-in efekti ile yükleyecektir.

<script>
$(document).ready(function()
{
    $("img.lazy").lazyload({ 
        effect : "fadeIn"
    });
}
</script>

html sayfasında lazy-load uygulanacak resimler.

<img class="lazy" data-original="resim1.jpg" heigh="240" src="arkaplan1.jpg" width="320" />
<img class="lazy" data-original="resim2.jpg" heigh="240" src="arkaplan2.jpg" width="320" />
<img class="lazy" data-original="resim3.jpg" heigh="240" src="arkaplan3.jpg" width="320" />
<img class="lazy" data-original="resim4.jpg" heigh="240" src="arkaplan4.jpg" width="320" />

data-original kısmına yüklenecek olan resmin yolunu, src kısmına ise yüklenmeden önce görülecek resmin yolunu veriyoruz.

DEMO

Diğer ayarlar için kendi sitesinden detaylı bilgilere ulaşabilirsiniz.

permanent link

cevaplandı: 28 Şub '13, 01:11

AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

AliRıza Adıyahşi ♦
7.9k146288
cevap kabul oranı: 44%

değiştirildi: 28 Şub '13, 06:19

sadece resimlere mi bunu yapabiliyoruz peki.sayfanın geri kalanı da böyle yüklenebilir mi?

(28 Şub '13, 01:23) wifi wifi's gravatar image

Evet sayfa kaydıkça farklı verilerin yüklenmesi de mümkün. Örnek1, Örnek2, Diğer Örnekler

(28 Şub '13, 01:46) AliRıza Adıyahşi ♦ AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image
Cevabınız
toggle preview

Bu soruyu takip et

E-Posta üzerinden:

Üyelik girişi yaptıktan sonra abonelik işlemlerini yapabilirsiniz

RSS üzerinden:

Cevaplar

Cevaplar ve Yorumlar

Yazı Formatlama

  • *italic* ya da _italic_
  • **bold** ya da __bold__
  • link:[text](http://url.com/ "başlık")
  • resim?![alt text](/path/img.jpg "başlık")
  • liste: 1. Foo 2. Bar
  • temel HTML etiketleri de kullanılabilir

Bu sorunun etiketleri:

×92
×72

Soruldu: 28 Şub '13, 01:04

Görüntüleme: 1,438 kez

Son güncelleme: 11 Mar '13, 09:43

powered by BitNami OSQA