jQuery Изображение fadeIn Upon Scroll Inside DIV

Question

Я не могу заставить плагин LazyLoad работать для меня, поэтому я пытаюсь написать свой собственный. В настоящее время у меня есть список загружаемых изображений внутри DIV. Они вытягиваются PHP-запросом в базу данных mysql. Прокрутка DIV настроена на авто. Код, который я использую:

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

Что изменилось:

• Я изменил display: none к opacity: 0 так, что любая невидимое изображение имеет по крайней мере пустой заполнитель одного и того же размера , так что полоса прокрутки будет видна.
• я затем исчезают при помощи animate к opacity: 1
• Я использовал JQuery each() для перебора изображений и проверить для каждого из них, если они должны или не должны быть утрачен в (вместо проверки для всех, как и раньше).
• Я обернул изображения в DIV. Я не думаю, что это необходимо, но это тоже не повредит.
• Я отметил каждое изображение id, так что я могу выделить их для fadein.

Есть еще некоторые эстетические проблемы, но это должно помочь вам на вашем пути.