javascript 库仅在刷新页面后才有效
[英]javascript library works only after refreshing the page
问题描述
So I'm using Swiper.js in order to swipe orizontally some content in my portfolio.
所以我使用Swiper.js来横向滑动我的投资组合中的一些内容。 If i open the page locally, everything works fine (I'm able to swipe, buttons are displayed,..) but if I open it on Netlify (free hosting service) I'm having an issue: buttons are displayed but I cannot swipe.如果我在本地打开页面，一切正常（我可以滑动，显示按钮，..）但如果我在 Netlify（免费托管服务）上打开它，我遇到问题：显示按钮但我不能刷卡。
Refreshing the page, fix the problem.刷新页面，解决问题。
In the head section i have links to CDN在头部我有指向 CDN 的链接
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
and the scripts are located right before the end of the body并且脚本位于正文结束之前
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
In the console.log i have this error: "filed to load resource: the server responded with a status of 404" .在 console.log 我有这个错误： “提交加载资源：服务器响应状态为 404” 。 Refreshing, again, fix the problem.再次刷新，解决问题。
Do you guys know how to fix this problem?你们知道如何解决这个问题吗？
1 个解决方案
解决方案1
0 2021-05-28 12:58:52
That is because the library loads before the page and so it cannot locate elements in the DOM, since they don't exist yet.这是因为库在页面之前加载，因此它无法在 DOM 中定位元素，因为它们还不存在。
Add a defer attribute to the script tag or place it at the end of the page.将defer属性添加到脚本标记或将其放在页面末尾。
<script defer src="..."></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.