<img data-image-src="images/c9c191f226c643eabcce6debfe76049d.png" src="" alt="A nify Image" class="img-responsive">

//Show images when in viewpoint
$(window).on('scroll load',function(){
    //Window width & height
    var viewpointWidth = $(window).width(),
    viewpointHeight = $(window).height(),
    //Document Top pos & Left pos
    documentScrollTop = $(document).scrollTop(),
    documentScrollLeft = $(document).scrollLeft(),
    //Document Positions
    minTop = documentScrollTop,
    maxTop = documentScrollTop + viewpointHeight,
    minLeft = documentScrollLeft,
    maxLeft = documentScrollLeft + viewpointWidth;
    //Loop for each image
    $('.page-content img').each(function(){
        $eleImage = $(this),
        elementOffset = $eleImage.offset();
        if((elementOffset.top > minTop && elementOffset.top < maxTop) && (elementOffset.left > minLeft &&elementOffset.left < maxLeft)) {
            $(this).attr('src',$(this).data('image-src'));
        }
    });
});