fancybox 图片库未显示在实时页面上

Posted 2023-05-09

【中文标题】fancybox 图片库未显示在实时页面上

【英文标题】：fancybox image gallery not showing on live page

【发布时间】：2020-11-07 05:56:54

【问题描述】：

在this page 我有一个使用fancybox 的照片库。在我的笔记本电脑上，我可以在本地看到所有 png 照片，但在 lice 网站上看不到。在头部我有到 fancybox css 的链接

<script>$(document).ready(function()$(".fancybox").fancybox());</script></body></html>. 

这是fancybox图片库的html

<div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="png" href="png/1.png"><div class="img-fixed"><img class="img-fluid lazy"  src="png/1.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/2.png"><div class="img-fixed"><img class="img-fluid  lazy"  src="png/2.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/3.png"><div class="img-fixed"><img class="img-fluid lazy"  src="png/3.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/4.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/4.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/5.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/5.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/6.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/6.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/7.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/7.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/8.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/8.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V1.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V1.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V2.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V2.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V3.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V3.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V4.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V4.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V5.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V5.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V6.png"><div class="img-fixed"><img class="img-fluid  lazy"  src="images/V6.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V10.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V10.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V11.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V11.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V10.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V10.png" /></div></a></div>
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V13.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V13.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2">
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V31.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V31.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V32.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V32.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V33.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V33.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V34.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V34.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V35.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V35.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V36.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V36.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V37.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V37.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V38.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V38.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V39.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V39.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V40.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V40.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V41.png"><div class="img-fixed"><img class="img-fluid lazy"  src="images/V41.png" /></div></a></div></div><div class="clearfix visible-sm"></div></div>

这里是fancybox 主页，如果您需要，我可以从中复制 css amd js 行。 amyone 能弄清楚为什么我上传后实时网站上没有加载 png 文件吗？

【参考方案1】：

这是因为您所有的 script 标记都具有 defer 属性（这意味着它会等到整个页面被加载后才会触发脚本）但是 FancyBox 脚本和您的最后一个内联脚本不包含它。这意味着您的最后一个包含$(".fancybox").fancybox() 的脚本将在运行FancyBox 所需的jQuery 脚本之前加载。

也将defer 属性传递给您的所有依赖脚本或将其从其他脚本中删除。

<script defer src="https://kit.fontawesome.com/593a9d194e.js"></script>
<script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script defer src=jquery.fancybox.min.js></script>
<script defer>
    $(document).ready(function() 
        $(".fancybox").fancybox()
    );
</script>

为什么它可以在您的本地笔记本电脑上运行？可能您的本地主机足够快（或缓存）来及时初始化这些脚本。