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

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的回调功能。按照现在的方式，它尝试在请求fancybox.pack.js的同时执行jQuery("#gallery a").fancybox()。它不会按顺序加载文件。每次加载资源时都会触发回调，您需要验证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();
        }
    }
});