javascript库仅在刷新页面后才起作用答案

【问题标题】：javascript library works only after refreshing the pagejavascript库仅在刷新页面后才起作用
【发布时间】：2021-05-28 12:45:35
【问题描述】：

所以我使用 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”。再次刷新，解决问题。

你们知道如何解决这个问题吗？

【问题讨论】：

为什么有缩小版+未缩小版？择其一
嗨@Costa，我删除了缩小版，但问题仍然存在
控制台有错误吗？
@JeremyThille 实际上，有一个错误：“提交加载资源：服务器响应状态为 404”

标签： javascript hyperlink swiper swiper.js

【解决方案1】：

这是因为库在页面之前加载，因此它无法在 DOM 中定位元素，因为它们还不存在。

将defer 属性添加到脚本标签或将其放在页面末尾。

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

【讨论】：

嗨，Mattia，实际上 defer 属性让事情变得更糟：现在如果我刷新页面，库就不再工作了
是的，这是显示的错误：“已提交加载资源：服务器响应状态为 404”
哦，那么服务器上的文件不存在。检查url是否正确