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

Question

我正在检查 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 弹出窗口：

    $('.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 移动到 ，可能在 ajax success 回调中。

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

注意："bad" 将您的原始代码转换为运行的替代方法可能是：

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
          }

         });
}

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

How to initialize jQuery plugin loaded using $.getScript

jquery

plugins

magnific-popup

getscript