lenye_base/load_images.js

基础方法

'use strict';

function loadImages(options) {
  var len = 0;
  var index = 0;
  var curIndex = 0;
  var stepTimer = null;
  var stepTimeValue = 5;
  var percentageValue = 0;
  var targetPercent = 0;
  var data = options.data || [];

  var step = options.step || function () {};

  var complete = options.complete || function () {};

  var needOneStep = options.needOneStep || false;
  var path = options.path || false;

  if (typeof data !== 'object' || data.length === 0) {
    step(100);
    return false;
  }

  len = data.length;

  if (path) {
    for (var i = len - 1; i > -1; i--) {
      data[i] = path + data[i]; // console.info(data[i]);
    }
  }

  var processStep = function () {
    percentageValue++; // console.info("processStep = ",percentageValue)

    step(percentageValue);

    if (percentageValue < targetPercent) {
      stepTimer = setTimeout(function () {
        processStep();
      }, stepTimeValue);
    } else if (targetPercent === 100 && percentageValue === targetPercent) {
      if (complete && typeof complete === 'function') {
        complete();
      }
    }
  };

  function onload() {
    curIndex++;
    targetPercent = Math.floor(curIndex / len * 100);

    if (needOneStep) {
      if (stepTimer) {
        clearTimeout(stepTimer);
      }

      processStep();
    } else {
      step(targetPercent);

      if (targetPercent === 100) {
        complete();
      }
    }
  }

  for (index; index < len; index++) {
    var strUrl = data[index];
    new LoadImageItem(strUrl, onload).start();
  }
}
/**
 * @name loadImageItem
 * @param  {string} url - images full url
 * @callback cb - called when load image completed
 */

function LoadImageItem(url, cb) {
  var self = this;
  self.img = new Image(); // readyState:'complete' or 'loaded' => image has been loaded。
  // for IE6-IE10。

  var onReadyStateChange = function () {
    removeEventHandlers();
    console.info('onReadyStateChange');
    cb(self, 'onReadyStateChange');
  };

  var onError = function () {
    console.info('onError');
    removeEventHandlers();
    cb(self, 'onError');
  };

  var onLoad = function () {
    removeEventHandlers();
    cb(self, 'onload');
  };

  var removeEventHandlers = function () {
    self.unbind('load', onLoad);
    self.unbind('readystatechange', onReadyStateChange);
    self.unbind('error', onError);
  };

  this.start = function () {
    this.bind('load', onLoad);
    this.bind('readystatechange', onReadyStateChange);
    this.bind('error', onError);
    this.img.src = url;

    if (self.img.complete) {
      removeEventHandlers();
      cb(this, 'onload');
    }
  };
}
/**
 * @name bind
 * @description cross-browser event binding
 * @param  {string} eventName
 * @param  {function} eventHandler
 */


LoadImageItem.prototype.bind = function (eventName, eventHandler) {
  if (this.img.addEventListener) {
    this.img.addEventListener(eventName, eventHandler, false);
  } else if (this.img.attachEvent) {
    this.img.attachEvent('on' + eventName, eventHandler);
  }
};
/**
 * @name unbind
 * @description cross-browser event un-binding
 * @param  {string} eventName
 * @param  {function} eventHandler
 */


LoadImageItem.prototype.unbind = function (eventName, eventHandler) {
  if (this.img.removeEventListener) {
    this.img.removeEventListener(eventName, eventHandler, false);
  } else if (this.img.detachEvent) {
    this.img.detachEvent('on' + eventName, eventHandler);
  }
};

module.exports = loadImages;