ユーザーがスクロールして画像を読み込むための遅延読み込みプラグインですか？

Question

私は怠惰なロードプラグインが本当に好きです。私はそれが新しいブラウザで動作していないと思っています。

とにかくユーザーがスクロールするまで画像を折りたたみの下に読み込まない独自のコードを書くことはできますか？

<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. 
}) 

私はこれが釘付け取得することができればそれは素晴らしいことだが、それはもはやサポートされていない残念the appelsiini siteです。

すべてのブラウザで動作するサイトが見つかりました。http://haw-lin.com/とよく似たプラグインスクリプトをhttp://www.appelsiini.net/projects/lazyloadに使用しています。 MITライセンスはなく、解読が難しいと感じています。

どのようなjQueryイメージ遅延ロードプラグインをお勧めしますか？

Answer 1

デモページjQuery image lazy load pluginは、MacのFF3.6では私にはうまくいかないようです。私はFirebugのNetタブでHTTPリクエストを見ていて、ロードされたすべてのイメージを見ることができました。

JAILと呼ばれるこのプラグインをチェックアウトすると、完璧に動作します（HTMLの変更が必要です）。 私は特に例を見ることを提案します。

Answer 2

forks of jquery_lazyload in githubを見ると、そのうちのいくつかはaddress the issuesとnewer browsersです。

Answer 3

あなたは、私はそれが怠惰な負荷に画像を含むHTMLの任意のビットを、HTMLのコメントを使用して書いたこのjQueryプラグイン試すことができます。

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

は、ここに例を示します

<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> 

基本的には、怠け者になるコンテンツをプレースホルダタグで囲み、内側HTMLコメント。プレースホルダがビューポートに表示されると、プレースホルダはコメント内のHTML文字列に置き換えられます。

プレースホルダに任意のタグを使用できますが、内部にコメントしかない場合は0ディメンションとしてレンダリングされるため、プレースメントは好きです。