2012-07-07 18 views
6

Birden çok kapsayıcıya Lazy Load plugin'u yüklemeyi deniyorum. Benzer bir soru buldum: Lazy Load on MULTIPLE horizontal containers. Lazy Load içinde birden fazla kapsayıcı

bu

benim girişimi: http://jsfiddle.net/BAFMC/

$(".p_outer_content").each(function() { 
    var tthis = $(this); 
    $(this).find('img').lazyload({ 
     container: tthis 
    }); 
});​ 

Ama Tembel yük sadece üçüncü bir tanesidir son kabın (.p_outer_content) (geçerli olmasıdır sözü sorusuna, aynı sorun var keman).

Bunu nasıl çözeceğini bilen veya başka bir öneri olan var mı?

Tamam, konteynerlerin biri her kaydırıldığında lazyload fonksiyonunu yeniden çalıştı: DÜZENLEME

peşin' in Teşekkür çalışır

$(".p_outer_content").each(function() { 
    var tthis = $(this); 
    $(this).find('img').lazyload({ 
     container: tthis 
    }); 
}); 

$(".p_outer_content").scroll(function() { 
    var tthis = $(this); 
    $(this).find('img').lazyload({ 
     container: tthis 
    }); 

});​ 

http://jsfiddle.net/BAFMC/4/

, ama bunu çözmenin iyi bir yolu olup olmadığını bilmiyorum. Bununla birlikte, daha iyi bir çözümün var mı? Teşekkürler '

+1

Bug 1.8.0 giderilmiştir. –

+0

Teşekkürler! Bunu duymak harika. – Alvaro

cevap

5

LazyLoad eklentisinde bir hata var. Özel bir kap sağladığınızda, genel bir değişken sızıntısı oldu. Bu çatalda asgari gerekli düzeltmeyi buraya ekledim.

https://raw.github.com/marchingants/jquery_lazyload/master/jquery.lazyload.js

İşte o örnekte doğrudan github ham dosyasını kullanıyorum bir çalışma demo http://jsfiddle.net/BAFMC/5/

, ama projenizde, dosyayı klonlamak onu küçültmek ve yerel olarak kullanın.

+0

Çok teşekkür ederim ' – Alvaro

+0

Benim için iyi çalışıyor teşekkürler! –

+2

js kemanında, tüm görüntüler gri kalıyor gibi görünüyor. Kod hala geçerli mi? –

3

Tembel yük ile çalışmak için birden çok div elde etmek amacıyla, resimlerin kapsayıcı kimliklerini açıkça belirtmeniz gerekir. İki div'leri #container1 ve #container2 varsa o zaman yazma: Yerine

$("#container1 img.lazy").lazyload({ container: $("#container1") });

$("#container2 img.lazy").lazyload({ container: $("#container2") });

: $("img.lazy").lazyload({ container: $("#container1") });

$("img.lazy").lazyload({ container: $("#container2") });

İlgili konular