有條件地加載Fancybox資源與Yepnope.js

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