Question

我正在尝试有条件地加载Fancybox js和css代码并仅在元素存在且我在特定页面中时才在元素上执行它。到目前为止，我一直在尝试以下代码：

yepnope({
test : jQuery('body').hasClass('edizioni'),
yep  : ['/assets/css/jquery.fancybox.css','/assets/js/libs/jquery.fancybox.pack.js','/assets/js/libs/jquery.mousewheel-3.0.6.pack.js',
        jQuery("#gallery a").fancybox()]
});

我得到Uncaught TypeError: Object [object Object] has no method 'fancybox'

我猜jquery运行正常，资源jquery.fancybox.pack.js正确加载。我的实施有什么问题？

Answer 1

您需要使用yepnope的回调功能。您现在的方式是，它会在请求jQuery("#gallery a").fancybox()的同时尝试执行fancybox.pack.js。它不会按顺序加载文件。每次加载资源时都会触发回调，您需要验证URL。

这应该可行，或至少让你开始：

yepnope({
    test : jQuery('body').hasClass('edizioni'),
    yep  : ['/assets/css/jquery.fancybox.css','/assets/js/libs/jquery.fancybox.pack.js','/assets/js/libs/jquery.mousewheel-3.0.6.pack.js'],
    callback: function (url, result, key) {
        if(url === "/assets/js/libs/jquery.fancybox.pack.js"){
            // Fancybox has loaded, it's safe to call it now
            jQuery("#gallery a").fancybox();
        }
    }
});

使用Yepnope.js有条件地加载Fancybox资源

1 个答案: