Optimized Image Loader /

by asdf

HTML

<p><img src="http://www.gravatar.com/avatar/dbb6e309422a96581b6f0c072a66630d?s=92&d=http%3A%2F%2Fmediacdn.disqus.com%2F1365023628%2Fimages%2Fnoavatar92.png" data-src="http://www.gravatar.com/avatar/dbb6e309422a96581b6f0c072a66630d?s=92&d=http%3A%2F%2Fmediacdn.disqus.com%2F1365023628%2Fimages%2Fnoavatar92.png"/></p>
        <p><img src="http://www.gravatar.com/avatar/dbb6e309422a96581b6f0c072a66630d?s=92&d=http%3A%2F%2Fmediacdn.disqus.com%2F1365023628%2Fimages%2Fnoavatar92.png" data-src="http://www.avatarsdb.com/avatars/love_at_rain.gif"/></p>
        <p><img src="http://www.gravatar.com/avatar/dbb6e309422a96581b6f0c072a66630d?s=92&d=http%3A%2F%2Fmediacdn.disqus.com%2F1365023628%2Fimages%2Fnoavatar92.png" data-src="http://www.avatarsdb.com/avatars/cat_newspapper.gif"/></p>
        <p><img src="http://www.gravatar.com/avatar/dbb6e309422a96581b6f0c072a66630d?s=92&d=http%3A%2F%2Fmediacdn.disqus.com%2F1365023628%2Fimages%2Fnoavatar92.png" data-src="http://www.avatarsdb.com/avatars/cats_happy_dance.gif"/></p>
        <p><img src="http://www.gravatar.com/avatar/dbb6e309422a96581b6f0c072a66630d?s=92&d=http%3A%2F%2Fmediacdn.disqus.com%2F1365023628%2Fimages%2Fnoavatar92.png" data-src="http://www.avatarsdb.com/avatars/green_cat_sleep.gif"/></p>
        <p><img src="http://www.gravatar.com/avatar/dbb6e309422a96581b6f0c072a66630d?s=92&d=http%3A%2F%2Fmediacdn.disqus.com%2F1365023628%2Fimages%2Fnoavatar92.png" data-src="http://www.avatarsdb.com/avatars/kitten_sleep.gif"/></p>
        <p><img src="http://www.gravatar.com/avatar/dbb6e309422a96581b6f0c072a66630d?s=92&d=http%3A%2F%2Fmediacdn.disqus.com%2F1365023628%2Fimages%2Fnoavatar92.png" data-src="http://www.avatarsdb.com/avatars/balloon_at_sunset.gif"/></p>
        <p><img src="http://www.gravatar.com/avatar/dbb6e309422a96581b6f0c072a66630d?s=92&d=http%3A%2F%2Fmediacdn.disqus.com%2F1365023628%2Fimages%2Fnoavatar92.png" data-src="http://www.avatarsdb.com/avatars/hi.gif"/></p>
        <p><img...

JavaScript

(function ($) {
    var $w = $(window);
    
    function getViewport () {
        return {
            left: $w.scrollLeft(),
            top: $w.scrollTop(),
            width: $w.width(),
            height: $w.height() 
        }
    }
    function inViewport () {
        var size = getViewport();
        var img = $("img[data-src]");
        var fold = size.height + size.top;
        img.each(function () {
            var el = $(this);
            var elTop = el.offset().top;
            if (fold >= elTop) {
                var src = el.attr("data-src");
                el.attr("src", src);
                el.removeAttr("data-src");
            }
        });
    }
    $w.on('scroll', inViewport);
    $(document).ready(function(){
        inViewport();
    });
})(jQuery);