我有一个有很多画廊的页面(使用galleria + fancybox)和顶部的图像滑块(nivo滑块)。问题是滑块需要时间来加载,因为浏览器同时也在加载图库。现在我想给滑块一个优先级,所以页面至少会有它的结构建立,或者也许,让画廊加载只在点击。
<script type="text/javascript"><!--fancybox-->
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script type='text/javascript'>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#gallery-1,#gallery-2,#gallery-3,#gallery-4,#gallery-5,#gallery-6,#gallery-7,#gallery-8,#gallery-9,#gallery-10,#gallery-11,#gallery-12,#gallery-1b,#gallery-2b,#gallery-3b,#gallery-4b');
</script>
不要使用document.ready()
,它会在加载HTML后加载,您可以尝试使用窗口。onload,在页面上的所有元素加载完成后发生。
$(window).on("load", function(){
$(".fancybox").fancybox();
});
然后,如果您想在单击事件时加载图库:
$('relevantIDHere').on('click', function(){
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#gallery-1,#gallery-2,#gallery-3,#gallery-4,#gallery-5,#gallery-6,#gallery-7,#gallery-8,#gallery-9,#gallery-10,#gallery-11,#gallery-12,#gallery-1b,#gallery-2b,#gallery-3b,#gallery-4b');
});