在div的视口中溢出时异步加载图像：

Question

I have this structure for my content:

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

So basically I have a div with overflow:scroll; which contains pictures of all the Facebook user's friends. For performance reasons, I think it's better to load images when they become visible in the viewport. I've tried everything including jquery.lazyload but I think because the images are inside my div with overflow:scroll the plugin doesn't function correctly.

Answer 1

If you think its because of the divs, why not remove them:

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

Answer 2

I used this post to elaborate the following code.

First of all change your html to get image only from the first:

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

Then use this js to trigger scroll event from #content div and check if all the image is visible:

$(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"));
            }
        });
    });
});

Please don't use this in production, the code should be optimized first.

Here is a link to the jsfiddle :