Cacher is the code snippet organizer for pro developers

<div class="image-wrapper" data-background="imagePath.jpg"></div>





<script type="text/javascript" src="jquery.inview.js"></script>
<script>
$(document).ready(function() {
    $(".image-wrapper").each(function() {
        $(this).bind('inview', function(event, visible) {
            if (visible === true) {
                console.log('we in view')
                $(this).css("background-image","url("+ $(this).attr("data-background") +")");
            }
        })
    })

})
  
</script>

/**
 * author Remy Sharp
 * url http://remysharp.com/2009/01/26/element-in-view-event-plugin/
 */
(function ($) {
   function getViewportHeight() {
       var height = window.innerHeight; // Safari, Opera
       var mode = document.compatMode;

       if ( (mode || !$.support.boxModel) ) { // IE, Gecko
           height = (mode == 'CSS1Compat') ?
           document.documentElement.clientHeight : // Standards
           document.body.clientHeight; // Quirks
       }

       return height;
   }

   $(window).scroll(function () {
       var vpH = getViewportHeight(),
           scrolltop = (document.documentElement.scrollTop ?
               document.documentElement.scrollTop :
               document.body.scrollTop),
           elems = [];
       
       // naughty, but this is how it knows which elements to check for
       $.each($.cache, function () {
           if (this.events && this.events.inview) {
               elems.push(this.handle.elem);
           }
       });

       if (elems.length) {
           $(elems).each(function () {
               var $el = $(this),
                   top = $el.offset().top,
                   height = $el.height(),
                   inview = $el.data('inview') || false;

               if (scrolltop > (top + height) || scrolltop + vpH < top) {
                   if (inview) {
                       $el.data('inview', false);
                       $el.trigger('inview', [ false ]);                        
                   }
               } else if (scrolltop < (top + height)) {
                   if (!inview) {
                       $el.data('inview', true);
                       $el.trigger('inview', [ true ]);
                   }
               }
           });
       }
   });
   
   // kick the event to pick up any elements already in view.
   // note however, this only works if the plugin is included after the elements are bound to 'inview'
   $(function () {
       $(window).scroll();
   });
})(jQuery);