Как инициализировать плагин jQuery, загруженный с помощью $.getScript

Question

Я проверяю, загружен ли скрипт плагина jQuery ( увеличенное всплывающее окно) в DOM, если нет, то я хочу загрузить его:

    if(typeof $.fn.magnificPopup !== 'undefined'){
        console.log('Plugin exists');
    }else{
        $.getScript('vendor/jquery.magnific-popup.min.js', function(){
            console.log('Script loaded.');
        });         
    }

Теперь обычно я бы инициализировал увеличенное всплывающее окно следующим образом:

    $('.gallery-img').magnificPopup({
        type: 'image',
        gallery: {
            enabled: true
        }
    });

Но это не работает. Как инициализировать плагин и применить его к элементам на моей странице?

Answer 1

Вы хотите объединить идеи:

function loadPopup(popupParams) {
    if ( typeof $.fn.magnificPopup !== 'undefined' ) {
        console.log('Plugin exists');
        $('#foo').magnificPopup(popupParams);
    }
    else {
        // Watch out! Relative URLs not recommended. Start with a '/' and traverse.
        $.getScript('vendor/jquery.magnific-popup.min.js', function() {
            console.log('Script loaded.');
            $('#foo').magnificPopup(popupParams);
        });         
    }
}

И в какой-то момент после того, как это было определено:

loadPopup({type: 'image', gallery: { enabled: true } });

Конечно, возможны изменения, например, параметризация вставляемого элемента.

Если $('#foo') еще не существует, тогда, конечно, он не будет работать. jQuery с радостью ничего не делает, если набор результатов селектора пуст. Используйте отладку, чтобы определить, пусто оно или нет. При необходимости переместите loadPopup чтобы после загрузки изображения, скорее всего, в ajaxsuccess Перезвоните.

Answer 2

Попробуй это:

if(typeof $.fn.magnificPopup !== 'undefined'){
    console.log('Plugin exists');
}else{
    $.getScript('vendor/jquery.magnific-popup.min.js', function(){
        console.log('Script loaded.');


        $('.gallery-img').magnificPopup({
          type: 'image',
         gallery: {
            enabled: true
          }

         });
    });         
}

Это должно работать, потому что $.getScript это асинхронный вызов, и это в пределах его complete Вы можете ожидать, что извлеченный скрипт был успешно загружен.

То, как вы это делали изначально, $('.gallery-img').magnificPopup({ }); часть вашего кода, вероятно, выполнялась до того, как скрипт плагина был полностью загружен.

NB: "плохая" альтернатива для запуска вашего исходного кода могла бы быть:

SetTimeout(function(){
   $('.gallery-img').magnificPopup({ });
}, 2000);

"2000" - это произвольные 2 секунды, которые вы даете (надеясь, что вызов ajax завершится). Теперь мы знаем, что у вас нет гарантии, что это действительно будет завершено. Поэтому придерживайтесь первого варианта.

РЕДАКТИРОВАТЬ

Я подозреваю, что мое первоначальное предложение кода не будет работать, когда плагин действительно уже был загружен. Итак, я пересматриваю:

if(typeof $.fn.magnificPopup !== 'undefined'){
    console.log('Plugin exists');
    doPopup('.gallery-img');
}else{
    $.getScript('vendor/jquery.magnific-popup.min.js', function(){
        console.log('Script loaded.');

        doPopup('.gallery-img');

    });         
}


function doPupup(selector){
        $(selector).magnificPopup({
          type: 'image',
         gallery: {
            enabled: true
          }

         });
}