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>