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

I am checking if a jQuery plugin (magnific popup) script is already loaded into the DOM, if it isn't then I want to load it:

我正在检查是否已经将一个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.');
        });         
    }

Now normally I would initialize magnific popup like this:

现在通常我会像这样初始化大型弹出窗口:

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

But this isn't working. How do I initialize the plugin and apply it to elements on my page?

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

2 个解决方案

#1

You want to integrate the ideas:

您想要整合这些想法:

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);
        });         
    }
}

And at some point after that's been defined:

在定义之后的某个时刻:

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

Variations are of course possible, such as parameterizing the element that gets inserted into.

变化当然是可能的,例如参数化插入的元素。

If $('#foo') doesn't exist yet, then of course it won't work. jQuery is happy to do nothing if the selector result set is empty. Use debugging to determine if it's empty or not. If necessary, move the loadPopup to after the image has loaded, likely in the ajax success callback.

如果$('#foo')还不存在,那么它当然不会起作用。如果选择器结果集为空,jQuery很乐意不做任何事情。使用调试来确定它是否为空。如有必要,可以在加载图像后将loadPopup移动到ajax成功回调中。

#2

Try this:

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
          }

         });
    });         
}

This should work because $.getScript is an asynchronous call, and it's within its complete callback you can expect the fetched script to have been successfully loaded.

这应该有效,因为$ .getScript是一个异步调用,并且它在完整的回调中你可以期望已经成功加载了获取的脚本。

The way you had it originally, the $('.gallery-img').magnificPopup({ }); portion of your code was probably running before the plugin script was fully fetched.

你原来的方式,$('。gallery-img')。magnificPopup({});在完全获取插件脚本之前,代码的一部分可能正在运行。

NB: A "bad" alternative to get your original code to run could have been:

注意:获取原始代码的“糟糕”替代方案可能是:

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

The "2000" is an arbitrary 2 seconds you're giving (hoping the ajax call before it would have completed). Now, we know you have no guarantee it will indeed have completed. Therefore, stick with the first option.

“2000”是你给出的任意2秒(希望在它完成之前调用ajax)。现在,我们知道您无法保证它确实已经完成。因此,坚持第一个选择。

EDIT

I suspect that my initial code suggestion will not work when the plugin had indeed already been loaded. So I'm revising:

我怀疑当插件确实已经加载时,我的初始代码建议不起作用。所以我正在修改:

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
          }

         });
}

#1