jQuery Image fadeIn In Scroll Inside DIV

Question

実際にLazyLoadプラグインが動作するようにはなっていないので、自分で作成しようとしています。現在、私はDIVの内部にロードされている画像のリストを持っています。それらはPHPクエリによってmysqlデータベースに引き込まれます。 DIVスクロールはautoに設定されています。私が使用しているコードは次のとおりです。

<div id="b1" style="overflow:auto;"> 
<?PHP $result = mysql_query("SELECT * FROM images"); 

while($row = mysql_fetch_assoc($result)) { 

echo "<img src='$row[photo]' style='display:none'> <br>"; 

} 

</div> 

<script type="text/javascript"> 
function imgCheck() { 
var position  = $("img").offset().top;    
var scrollCheck  = $("#b1").scrollTop() + $("#b1").height(); 
if (scrollCheck > position) { 
    $("img").fadeIn("fast"); 
    } 


$("#b1").scroll(function() { imgCheck() }); 
</script> 

これは私にとってはあまり効果がありませんが、誰も私を助けたり、いくつかの提案を撃つことができますか？

Answer 1

物事のカップル：

• 他の人がすでに、あなたのコードは、構文エラーを持っていると述べてきたように - PHPとJavascriptの両方。
• display: noneを使用すると、要素の高さが上がらず、全体がスクロールできなくなり、失敗します。
• 最初のいくつかの要素は、ユーザーが

スクロール、私たちが書いてみることができますこれらを勘案起動しなくても表示されている必要があり、このこの方法：

// Cache the containing element and it's height 
var b1 = $('#b1'), 
    h = b1.height(); 

// Insert 20 img's - simulating server-side code 
for(var i = 0; i < 20; i++){ 
    $('<img />', { 
     src: 'http://placehold.it/100x100', 
     alt: '', 
     class: 'hidden', 
     width: 100, 
     height: 100 
     // visibility: hidden to retain it's size 
    }).css('visibility', 'hidden').appendTo(b1); 
} 

b1.scroll(function(){ 
    // Loop through only hidden images 
    $('img.hidden').each(function(){ 
     // $(this).position().top calculates the offset to the parent 
     // So scrolling is already taken care of here 
     if(h > $(this).position().top){ 
      // Remove class, set visibility back to visible, 
      // then hide and fade in image 
      $(this).css('visibility', 'visible') 
       .hide() 
       .removeClass('hidden') 
       .fadeIn(300); 
     } else { 
      // No need to check the rest - everything below this image 
      // will always evaluate to false - so we exit out of the each loop 
      return false; 
     } 
    }); 
    // Trigger once to show the first few images 
}).trigger('scroll'); 

はここに、このデモをご覧ください。 ：http://jsfiddle.net/yijiang/eXSXm/2

Answer 2

すべての画像が非表示の場合、要素がスクロールしないので、「スクロール」さえ呼ばれることはありません。

正確に達成しようとしているのは何ですか？これまでには見えなかったが新しい画像を表示する場合は、目に見えるようにする必要があります。

<div id="b1" style="overflow:auto;"> 
<?php $result = mysql_query("SELECT * FROM images"); 

while($row = mysql_fetch_assoc($result)) { 
    echo "<img src='$row[photo]' style='visibility:hidden'> <br>"; 
} ?> 

</div> 

<script type="text/javascript"> 

function imgCheck() { 
    var scrollCheck = $("#b1").scrollTop() + $("#b1").height(); 

    $("#b1 img").each(function() { 
     var position = $(this).offset().top;    
     if (scrollCheck > position) { 
      $(this).fadeIn("fast"); 
     } 
    }); 
} 

$(document).ready(imgCheck); 

$("#b1").scroll(imgCheck); 
</script> 

私は上記をテストしていない、と私は彼らの「トップのすべてがすべて隠されたと持っていないされているため、それらに0になりますので、それは、すぐに示されているすべての画像になりますことを想像することができます注意その位置はDOM内の以前の画像によって影響を受けます。

編集

私は視界持っているので、IMGの上記のコードを変更しました：、私はそれをテストしてきた隠された、彼らに高さを与え、DOM

Answer 3

にスペースを取る必要がありますいくつかの変更を加えて動作するようです：

http://jsfiddle.net/antiflu/zEHtu/

私は変更しなければならなかったいくつかのもの：

• 私はimgCheck()機能のためのクロージング}を追加し、あなたは）
• いくつかのアイテムは、そうでない場合、スクロールバーが表示されないとimgCheck（決して、上の最初から見えるようにする必要があり、それを忘れて呼び出されることはありません。

---

OK上記の問題点は、画像がスクロール時に別途でフェードしないということでした。私はそれはいくつかの変更を加えているが動作するようになった：

http://jsfiddle.net/antiflu/GdzmQ/

私は何が変わった：

• どんな目に見えない画像は、同じサイズの少なくとも空のプレースホルダを持つように私はopacity: 0にdisplay: noneを変更しましたスクロールバーが表示されるようにします。
• 私はその後opacity: 1
• にanimateを使用してフェードイン私は、画像を反復し、彼らが必要か（前のように、代わりにすべてのチェックの）フェードインするべきではない場合は、それらのそれぞれをチェックするためのjQuery each()を使用。
• 私はDIVでイメージをラップしました。私はそれが必要だとは思わないが、どちらも害はない。
• 私はidで各画像にタグをつけました。そのため、私はそれらをフェードインのために取り除くことができます。

まだ審美的な問題がいくつかありますが、これはあなたを助けるはずです。