Wtyczka Lazy Load ładuje obrazy jako zwoje użytkownika?

Question

Bardzo podoba mi się plugin leniwego ładowania i jestem wypatroszony, nie działa on w nowych przeglądarkach.

Czy mogę napisać własny kod, który nie ładuje obrazów pod zakładką, dopóki użytkownik nie przewinie?

<img _src="/fullscreen/img/You are everywhere 2.png" class='lazyLoad' /> 

jQuery('.lazyLoad').each(function(){ 
     var _elm= jQuery(this); 
     _elm.attr('src',_elm.attr('_src')); 

     //on DOM ready loop through each 
     //image with class=lazyLoad and add src attribute to it. 
}) 

Byłoby wspaniale, jeśli mogę dostać ten przybity, szkoda the appelsiini site nie jest obsługiwany dłużej.

Znalazłem stronę, która działa we wszystkich przeglądarkach http://haw-lin.com/ i używa bardzo podobnego skryptu wtyczki do http://www.appelsiini.net/projects/lazyload. Nie ma licencji MIT i trudno mi to rozszyfrować.

Jaką wtyczkę leniwego obrazu jQuery można polecić?

Answer 1

Strona demonstracyjna jQuery image lazy load plugin wydaje mi się nie działać na FF3.6 na Macu. Oglądałem żądania HTTP z zakładką Net w Firebug i mogłem zobaczyć wszystkie załadowane obrazy.

Możesz wypróbować tę wtyczkę o nazwie JAIL, która działa idealnie (wymaga jednak pewnych zmian HTML). Szczególnie proponuję przejrzeć przykłady.

Answer 2

Jeśli spojrzeć na forks of jquery_lazyload in github, niektóre z nich address the issues z newer browsers.

Answer 3

Można spróbować tego jQuery plugin I napisał, że używa komentarzy HTML do leniwego obciążeniem wszelkie arbitralne bitów HTML, w tym obrazów:

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

Oto przykład:

<pre class=”i-am-lazy” ><!– 
    <img src=”some.png” /> 
–></pre> 

<pre class=”i-am-lazy” ><!– 
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div> 
–></pre> 

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script> 
<script type=”text/javascript” > 
$(document).ready(function() 
{ 
    $(’pre.i-am-lazy’).lazyLoad(); 
}); 
</script> 

Więc w zasadzie zawijasz zawartość, którą chcesz leniwym ładowaniem za pomocą znacznika zastępczego i wewnętrznego Komentarz HTML. Kiedy symbol zastępczy staje się widoczny w oknie roboczym, jest zastępowany łańcuchem HTML wewnątrz komentarza.

Możesz użyć dowolnego znacznika dla symbolu zastępczego, ale lubię pre, ponieważ renderuje się jako wymiar 0, gdy wewnątrz jest tylko komentarz.