Loading visible images
Here are a few callouts/suggestions:

You should throttle your code on the scroll event.  That way the event doesn't fire thousands of times.  You can read up this article for more information.  A basic example would be: 

//which makes the `scroll` event fire every 250ms.
$(window).scroll( $.throttle( 250, loadVisibleImages) );


You probably don't need to get the viewport size every time through the loop.  This should be called once at the start and then only on the resize event.  Otherwise, it never changes so there is no need to re-calculate it.

//which makes the `resize` event fire every 250ms.
$(window).resize( $.throttle( 250, getViewportHeight) );


You can add a class to all the images that have already been processed and exclude them from your selector.  This way you are only dealing with new images.
For example:

function loadVisibleImages() {
  jQuery('img[data-src]').not('.processed').each(function() {
    if(jQuery(this).is(':visible')) {
        if(inView(jQuery(this), 100)) {
            this.src = jQuery(this).attr('data-src').addClass('processed');
        }
    }
  });
}


If you haven't already you should wrap your code in an IIFE so you can create a private scope.  Just take the code below and put it around your existing code.  This would also allow you to use $ for jQuery without worry.

(function( $ ) {
  //your code here
}) ( jQuery );


You could optimize the loop in your loadVisibleImages functions.  See your other question.

Hope that helps!