fancybox 圖片庫未顯示在實時頁面上

Question

在這個頁面上，我有一個使用 fancybox 的照片庫。 在我的筆記本電腦上，我可以在本地看到所有 png 照片，但在 lice 網站上看不到。 在標題部分，我有到 fancybox css <link rel=stylesheet type=text/css href=jquery.fancybox.min.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" alt="aerial view of Rye" 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" alt="aerial view of property 15" 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" alt="aerial view 3" 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" alt="aerial view of property 5" 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" alt="aerial-property-6" 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" alt="aerial-property-8" 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" alt="aerial-property-11" 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" alt="aerial tree" 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" alt="ocean-view-living-1" 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" alt="ocean-view-living-2" 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" alt="ocean-view-living-1" 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" alt="ocean-view-living-1" 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" alt="aerial view of Rye" 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" alt="aerial view of property 15" 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" alt="aerial view 3" 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" alt="aerial view of property 5" 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" alt="aerial-property-6" 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" alt="aerial tree" 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" alt="aerial-property-11" 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" alt="aerial tree" 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" alt="aerial view of Rye" 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" alt="aerial-property-6" 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" alt="aerial-property-11" 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" alt="aerial tree" 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" alt="aerial view of Rye" 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" alt="aerial-property-6" 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" alt="aerial-property-11" 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" alt="aerial tree" 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" alt="aerial view of Rye" src="images/V41.png" /></div></a></div></div><div class="clearfix visible-sm"></div></div>

這是我復制 css amd js 行的fancybox主頁，如果你需要的話。 amyone 可以弄清楚為什么我上傳后 png 沒有加載到實時網站上嗎？

Answer 1

這是因為您所有的script標簽都具有defer屬性（這意味着它會等到整個頁面被加載后才會觸發腳本）但是FancyBox腳本和您最后一個內聯腳本不包含它。 這意味着在運行 FancyBox 所需的jQuery腳本之前加載包含$(".fancybox").fancybox()的最后一個腳本。

將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>

為什么它可以在您的本地筆記本電腦上運行？ 可能您的本地主機足夠快（或緩存）來及時初始化這些腳本。