Запасной вариант lightbox2, когда cdn js cloudflare недоступен

Я загружаю лайтбокс2 через следующий CDN //cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js

если это недоступно, я хочу вернуться к своим основным файлам. Как проверить, был ли уже определен лайтбокс, чтобы не загружать файлы ядра.

Я пробовал typeof lightbox === "undefined", но это всегда возвращает true, заставляя мои основные файлы загружаться.

У меня уже есть запасные варианты для jquery, angular и т. д. Это lightbox2, с которым у меня возникают проблемы с проверкой того, был ли он уже загружен.


javascript cloudflare fallback lightbox2
person neilakapete    schedule 17.12.2014    source источник
comment
Взгляните на этот ТАК вопрос. Может быть, это помогает.   -  person AWolf    schedule 17.12.2014
comment
это фактическая проверка доступности lightbox2, с которой у меня возникли проблемы.   -  person neilakapete    schedule 19.12.2014

Ответы (1)


arrow_upward
1
arrow_downward

Да, проблема здесь в том, что в глобальной области видимости ничего нет, потому что лайтбокс ничего к ней не добавляет. (см. этот SO вопрос). Вот почему вы не можете протестировать его, как window.lightbox.

Обходной путь — загрузить скрипт с запросом ajax, как в демо ниже. Метод getScript представляет собой сокращенную функцию Ajax (подробнее см. здесь).

Там у вас есть обратный вызов с ошибкой, где вы можете добавить свой локальный скрипт в DOM, если загрузка cdn не удалась.

Вы можете сделать то же самое для любого файла, который вы загружаете с cdn (например, таблицы стилей лайтбокса).

var addLocalScript = function (src) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = src; // use this for linked script
    //script.text = "alert('voila!');" // use this for inline script
    document.body.appendChild(script);
};

$(function () {
    var url = 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js';

    $.getScript(url)
        .done(function (script, textStatus) {
        console.log(textStatus);
    })
        .fail(function (jqxhr, settings, exception) {
        console.log('cdn load failed');
        //add local script
        addLocalScript('js/lightbox/lightbox.min.js');
    });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://lorempixel.com/400/200" data-lightbox="image-1" data-title="My caption"><img src="http://lorempixel.com/400/200"/></a>

person AWolf    schedule 18.12.2014