LazyLoader - preload overlay generator

lazyloader.js

var LazyLoader = function(selector, args) {
  var fn = {
        insert: function(){      
          target.each(function(){
            var docFragment = $(document.createDocumentFragment());
            docFragment.append('<div class="lazyLoader"><span class="lazyLoader-icon"></span></div>')
            $(this).prepend(docFragment);
          });
        },
        fade: function(){
          target.each(function(i){
            var loading = $(this).find('.lazyLoader');
            setTimeout(function(){
              loading
                .animate({
                    'opacity': '0'
                }, prop.fade, function(){
                    $(this).remove(); // destroy overlay when animation completes
                });
            }, prop.delay * i);
          });
        },
        delay: function(){
          setTimeout(function(){
              fn.fade(); // call this function once all of the overlays have been inserted
          }, prop.load);
        },
        init: function(){
          fn.insert();
          fn.delay();
        }
      },
      helper = {
        clone: function(obj, src) {
          var clone = {};
          Object.keys(obj).forEach(function(key) { clone[key] = obj[key]; });
          Object.keys(src).forEach(function(key) { clone[key] = src[key]; });
          return clone;
        },
        extend: function(obj, src){
          Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
          return obj;
        }
      },
      target = $(selector),
      count = target.length - 1,
      defaults = {
        load: 3000, // time between insert and fade start
        fade: 200,  // fade duration
        delay: 100  // delay between each successive insert fade out
      },
      prop = (typeof args === "object") ? helper.clone(defaults, args) : defaults;
  
  return {
    view: {
      target: function(){
        console.log(target);
      },
      defaults: function(obj){
        switch(obj) {
          case 'defaults':
            console.log(defaults);
            break;
          case 'prop':
            console.log(prop);
            break;
          default:
            console.log(defaults);
            break;
        }
      }
    },
    change: {
      target: function(newTarget){
        target = newTarget;
      },
      defaults: function(obj){
        helper.extend(prop, obj);
      },
      reset: function(){
        helper.extend(prop, defaults);
      }
    },
    execute: function(act){
      switch(act){
        case 'init':
        case 'insert':
        case 'fade':
        case 'delay':
          fn[act]();
          break;
        default:
          fn.init();
          break;
      }
    }
  };
};

lazyloader.less

.lazyLoader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #cdcdcd;
    z-index: 10;

    .lazyLoader-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -36.5px;
        margin-top: -23.5px;
        width: 72px;
        height: 47px;
        background: #929292;
        z-index: 0;
        
        &:before {
            content: "";
            position: absolute;
            background: rgba(0, 0, 0, 0.4);
            width: 100%;
            bottom: 0;
            -webkit-animation: wipe 2.4s cubic-bezier(.2,.6,.8,.4) forwards;
            -moz-animation: wipe 2.4s cubic-bezier(.2,.6,.8,.4) forwards;
            animation: wipe 2.4s cubic-bezier(.2,.6,.8,.4) forwards;
            animation-iteration-count: infinite;
        }
        
        &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            background-repeat: no-repeat;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAAAwCAYAAABdXlfVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGODdGMTE3NDA3MjA2ODExOTJCMEMwNDMwNzg5MjBENCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5RTdDNEVDRDU0ODgxMUU1QUEwN0FDQTg0RjdERjRBMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5RTdDNEVDQzU0ODgxMUU1QUEwN0FDQTg0RjdERjRBMyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Rjg3RjExNzQwNzIwNjgxMTkyQjBDMDQzMDc4OTIwRDQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjg3RjExNzQwNzIwNjgxMTkyQjBDMDQzMDc4OTIwRDQiLz4gPC9yZGY6RGVzY3Jp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');
            
        }
    }
}

@-webkit-keyframes wipe {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}
@keyframes wipe {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}