如何初始化使用 $.getScript 加载的 jQuery 插件答案

【问题标题】：How to initialize jQuery plugin loaded using $.getScript如何初始化使用 $.getScript 加载的 jQuery 插件
【发布时间】：2015-03-06 19:11:35
【问题描述】：

我正在检查一个 jQuery 插件 (magnific popup) 脚本是否已经加载到 DOM 中，如果没有，那么我想加载它：

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

现在通常我会像这样初始化 magnific popup：

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

但这不起作用。如何初始化插件并将其应用于页面上的元素？

【问题讨论】：

标签： jquery plugins magnific-popup getscript

【解决方案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 移动到图像加载后，可能在ajax success 回调中。

【讨论】：

我已经尝试过了，但仍然无法正常工作 - 我在加载脚本后将弹出窗口添加到通过 ajax 加载的图像中。这可能是它不起作用的原因吗？有没有办法在 jQuery 插件上使用.on()？
已编辑以反映您的问题。

【解决方案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({ }); 部分可能在插件脚本被完全获取之前运行。

注意：让您的原始代码运行的“糟糕”替代方案可能是：

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
          }

         });
}

【讨论】：