0

我的内容有这样的结构：

<div id="content" style="overflow:scroll;height:500px; width: 500px;">
    <div style="width:500px;height:100px;>
     <img src='http://graph.facebook.com/user1/picture?width=50&height=50'>
    </div>
    <div style="width:500px;height:100px;>
     <img src='http://graph.facebook.com/user2/picture?width=50&height=50'>
    </div>
    ...
    <div style="width:500px;height:100px;>
     <img src='http://graph.facebook.com/userN/picture?width=50&height=50'>
    </div>
</div>

所以基本上我有一个 div，overflow:scroll;其中包含所有 Facebook 用户朋友的照片。出于性能原因，我认为当图像在视口中可见时加载图像会更好。我已经尝试了包括jquery.lazyload在内的所有方法，但我认为因为图像在我的 div 中，overflow:scroll并且插件无法正常工作。

4

2 回答 2

0

我使用这篇文章来详细说明以下代码。

首先更改您的 html 以仅从第一个获取图像：

<div id="content" style="overflow:scroll;height:100px; width: 100px;">
    <div style="width:500px;height:100px;">
        <img src='http://graph.facebook.com/user1/picture?width=50&height=50' />
    </div>
    <div style="width:500px;height:100px;">
        <img msrc='http://graph.facebook.com/user2/picture?width=50&height=50'/>
    </div>
    ...
    <div style="width:500px;height:100px;">
        <img msrc='http://graph.facebook.com/userN/picture?width=50&height=50'/>
    </div>
</div>

然后使用这个js从#contentdiv触发滚动事件并检查所有图像是否可见：

$(function(){
    var content = $("#content");

    function isScrolledIntoView(elem)
    {
        var divViewTop = content.scrollTop();
        var divViewBottom = divViewTop + content.height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= divViewBottom) && (elemTop >= divViewTop));
    }

    content.scroll(function(e){
        content.find("img").each(function(i,e){
            if(isScrolledIntoView(e)){
                $(e).attr("src",$(e).attr("msrc"));
            }
        });
    });
});

请不要在生产中使用它，代码应该先优化。

这是jsfiddle的链接：

于 2013-04-26T12:06:46.933 回答
0

如果您认为这是因为 div，为什么不删除它们：

<div id="content" style="overflow:scroll;height:500px; width: 500px;">
     <img height='100' width='500' src='http://graph.facebook.com/user1/picture?width=50&height=50'>
     <img height='100' width='500' src='http://graph.facebook.com/user2/picture?width=50&height=50'>
    ...
</div>
于 2013-04-26T12:05:54.860 回答