lenye_base/es/loadcss.js

基础方法

import attr from './attr.js';
import c from './c.js';
import randomKey from './random_key.js';

/* eslint-disable no-invalid-this */
function loadcss(url, callback) {
  var promise;
  var resolutions = [];
  var rejections = [];
  var resolved = false;
  var rejected = false;
  var id;
  id = 'load-css-' + randomKey(5);
  promise = {
    done: function (callback) {
      resolutions.push(callback);
      if (resolved) callback();
      return promise;
    },
    fail: function (callback) {
      rejections.push(callback);
      if (rejected) callback();
      return promise;
    }
  };

  function resolve() {
    resolved = true;

    for (var i = 0, len = resolutions.length; i < len; i++) {
      resolutions[i]();
    }
  }

  function reject() {
    rejected = true;

    for (var i = 0, len = rejections.length; i < len; i++) {
      rejections[i]();
    }
  }

  var link = c('link');
  attr(link, 'id', id);
  attr(link, 'rel', 'stylesheet');
  attr(link, 'type', 'text/css');

  if (typeof link.addEventListener !== 'undefined') {
    link.addEventListener('load', resolve, false);
    link.addEventListener('error', reject, false);
  } else if (typeof link.attachEvent !== 'undefined') {
    link.attachEvent('onload', function () {
      // IE 8 gives us onload for both success and failure
      // and also readyState is always "completed", even
      // for failure.  The only way to see if a stylesheet
      // load failed from an external domain is to try and
      // access its cssText, and then catch the error
      // ... sweet :/
      var cur;
      var i = document.styleSheets.length;

      try {
        while (i--) {
          cur = document.styleSheets[i];

          if (cur.id === id) {
            resolve();
            return;
          }
        }
      } catch (e) {}

      if (!resolved) {
        reject();
      }
    });
  }

  document.getElementsByTagName('head')[0].appendChild(link);
  attr(link, 'href', url);
  return promise;
}

export default loadcss;