 
         position = (@inlinescrolling - @inlinescrolling / $('body').innerWidth() * imagePos) / -2
         if -@inlinescrolling <= position <= 0 then $img.css('background-position', "#{position}px 100%")
+
+        if imagePos - $('body').innerWidth() - @loadThreshold < 0 and not $img.data('loaded')
+          $img.data('loaded', yes)
+          $preloadImg = $('<img>').attr('src', highSource)
+          $preloadImg.appendTo('body').hide().on 'load', =>
+            $preloadImg.remove()
+            $img.fadeOut 'fast', ->
+              $img.css('background-image', "url('#{highSource}')").fadeIn 'fast'
+
 
       $(window).resizestop => 
         windowHeight = $('body').innerHeight()

    className:  'item'
    tagName:    'li'
    inlinescrolling: 160

    render: ->
      super
      $img = @$el.children('.image').first()

      highSource = $img.data('original');
      imageHeight = $img.data('height');

        @$el.css('margin-top', (windowHeight - height) / 2)

      $(window).trigger 'resize'
