如何为 Respond.js 创建自定义事件监听器

Question

我正在使用 Respond.js 来确保我在 IE8 中的一个项目与 bootstrap 3 的兼容性。

我正在加载一个带有 response.proxy.js 的大型 CSS 文件。在 Respond 加载和抓取 CSS 后，我必须初始化一些依赖该 CSS 的 jQuery 插件。

我希望能够像 jQuery 对 $(document).ready() 所做的那样。

是否可以创建自定义事件侦听器，例如。 $(respond).finished(...) 在 Respond 完成工作后被调用？我需要在不同的脚本和文件中初始化这些插件。

Answer 1

由于 respond.js 不触发任何事件或提供任何应用回调函数的方式，您唯一的选择是修改 respond.js 以使其触发事件。

我建议修改这一行：

https://github.com/scottjehl/Respond/blob/master/src/respond.js#L298

if (requestQueue.length) {
    var thisRequest = requestQueue.shift();

    ajax(thisRequest.href, function (styles) {
        translate(styles, thisRequest.href, thisRequest.media);
        parsedSheets[thisRequest.href] = true;

        // by wrapping recursive function call in setTimeout
        // we prevent "Stack overflow" error in IE7
        w.setTimeout(function () {
            makeRequests();
        }, 0);
    });
}/* from here on was added*/ else {
    var event = new Event("respondFinished");
    document.dispatchEvent(event);
}

现在您可以在需要它的脚本中将事件侦听器添加到文档中。

if (window.respond.mediaQueriesSupported) {
    doSomething();
} else {
    $(document).on("respondFinished", doSomething);
}

您需要尽快添加此事件处理程序，最好是在文档准备好之前，以确保在 response.js 完成之前绑定事件。