Как создать собственный прослушиватель событий для Respond.js

Question

Я использую Respond.js для обеспечения совместимости с начальной загрузкой 3 для одного из моих проектов в IE8.

Я загружаю большой CSS-файл с response.proxy.js. После того, как CSS будет загружен и разорван с помощью Respond, мне нужно будет инициализировать несколько плагинов jQuery, которые используют этот CSS.

Я хотел бы быть в состоянии сделать что-то подобное с jQuery $(document).ready(),

Можно ли создать пользовательский прослушиватель событий, например. $(respond).finished(...) что вызывается после того, как Respond закончил свою работу? Мне нужно инициализировать эти плагины в разных скриптах и ​​файлах.

Answer 1

Так как response.js не вызывает никаких событий и не предоставляет какой-либо способ применения функции обратного вызова, ваша единственная возможность - изменить response.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.