javascript 庫僅在刷新頁面后才有效

Question

所以我使用Swiper.js來橫向滑動我的投資組合中的一些內容。 如果我在本地打開頁面，一切正常（我可以滑動，顯示按鈕，..）但如果我在 Netlify（免費托管服務）上打開它，我遇到問題：顯示按鈕但我不能刷卡。

刷新頁面，解決問題。

在頭部我有指向 CDN 的鏈接

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

並且腳本位於正文結束之前

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

在 console.log 我有這個錯誤： “提交加載資源：服務器響應狀態為 404” 。 再次刷新，解決問題。

你們知道如何解決這個問題嗎？

Answer 1

這是因為庫在頁面之前加載，因此它無法在 DOM 中定位元素，因為它們還不存在。

將defer屬性添加到腳本標記或將其放在頁面末尾。

<script defer src="..."></script>