Sample implementation for infinite scroll Ajax Loader

scroll-ajax-loader.coffee

class MyPhotoViewer
  showPhotos: (data) =>
    photo_list_view = '<ul class="photo-list"></ul><section class="ajax-loader"><img src="/assets/ajax-loader.gif" alt="loading..." /></section>'
    @element.append photo_list_view
    $(window).on 'DOMContentLoaded load resize scroll', @morePhotos
    @addPhotos data
    
  morePhotos: =>
    if @scrollerInView() and !(@paging.active or @paging.complete)
      $('section.ajax-loader img').slideDown 'fast'
      @paging.offset += 1
      @photoRequest(@paging.offset).done (data) =>
        if data.length
          if data.length < 15 or @photo_count >= @total_photo_count
            @paging.complete = true
            @removeAjaxLoader()
          @addPhotos data
        else
          @paging.complete = true
          @removeAjaxLoader()
          
  scrollerInView: ->
    rect = $('section.ajax-loader')[0].getBoundingClientRect()
    rect.top >= 0 and rect.left >= 0 and rect.bottom <= (window.innerHeight || $(window).height()) and rect.right <= (window.innerWidth || $(window).width())
  
  removeAjaxLoader: ->
    $(window).off 'DOMContentLoaded load resize scroll', @morePhotos
    $('section.ajax-loader img').slideUp 'fast', =>
      @element.find('section.ajax-loader').remove()