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（）。

确定以上问题是图像在滚动时不会单独淡入。我通过一些修改得到了它的工作：

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

我改变了什么：

我将display: none更改为opacity: 0，以便任何不可见的图片至少有一个相同大小的空占位符，以便滚动条可见。
然后我使用animate淡入opacity: 1
我使用jQuery each()迭代图像并检查每个图像是否应该或不应该被淡入（而不是像之前那样检查所有图像）。
我把图像包裹在DIV中。我不认为这是必要的，但也不会造成伤害。
我用id标记每张图片，以便我可以将它们单独输出为fadein。

仍有一些美学问题，但这应该会帮助你。

jQuery图像淡入DIV中的滚动

3 个答案: