延迟加载 css 个文件

Question

我正在尝试使用如下代码加载其他 css 文件：

var doc = document,
    head = doc.getElementsByTagName('head')[0],
    link = doc.createElement('link'),
    file = link.cloneNode(true);

file.type = 'text/css';
file.rel = 'stylesheet';

file.onload = function () {
    alert('css file is loaded!');
};
file.onerror = function () {
    // 404 error
    alert('Script ' + url + ' wasn\'t loaded! Check file URL');
};

file.href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
head.appendChild(file);

http://jsfiddle.net/d3bcp4dy/1/

在 CH、FF、Opera 20+ 等中完美运行，

但在 Safari5.1、IOS 5.1、Android 4.2 及更低版本中不起作用！

为什么 onload/onerror 事件对 .css 文件不起作用？

p.s。如果我将文件更改为 .js - onload 或 onerror 事件有效。

Answer 1

如果通知不可靠，您可以轮询以查看新样式表是否到达，请参阅评论：

(function() {
    // Remember how many stylesheets there are
    var old = document.styleSheets.length;

    // Set a timeout
    var timeout = Date.now() + 30000;

    // Watch for new arrivals
    var timer = setInterval(function() {
        if (document.styleSheets.length > old) {
            console.log("Got it! " + document.styleSheets.length);
            clearInterval(timer);
        } else if (Date.now() > timeout) {
            console.log("Give up");
            clearInterval(timer);
        }
    }, 100);

    // Add the stylesheet link
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";
    link.onload = function() {
        console.log("Got it, clearing timer");
        clearInterval(timer);
        // ...
    };
    link.onerror = function() {
        console.log("Got error, clearing timer");
        clearInterval(timer);
        // ...
    };
    document.querySelector('head').appendChild(link);
})();

与使用 ajax 请求相比，这样做的优势在于您不需要 CORS。

注意：我在上面为了方便使用了Date.now，您需要在某些浏览器上shim/polyfill它（或不使用它）你提。 shim/polyfill 是微不足道的：

if (!Date.now) {
    Date.now = function() {
        return +new Date;
    };
}

Answer 2

幸运的是，https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css 启用了 CORS，因此您可以使用 XMLHttpRequest，甚至可以使用 fetch

使用提取

fetch('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
.then(function(response) {
    return response.text();
})
.then(function(text) {
    var style = document.head.appendChild(document.createElement('style'));
    style.textContent = text;
    console.log('style loaded');
}).catch(function(err) {
    console.error('style load failed with error', err);
});

用于获取的 Polyfill - https://github.com/github/fetch you'll probably also need a polyfill for Promise if you need one for fetch - https://www.promisejs.org/#browser

如果需要，您也可以使用 XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
xhr.addEventListener('load', function() {
    console.log('style loaded', this.responseText);
});
xhr.addEventListener('error', function(e) {
    console.error('style load failed');
});
xhr.send();

如果您是为石器时代的浏览器编写代码，则可以使用 ActiveX 垃圾和 Internet Explorer 中一些奇怪的跨域黑客来实现同样的目的 - 使用它或其他任何东西

延迟加载 css 个文件

Lazy load of css file

javascript

css

lazy-loading