gpt4 book ai didi

javascript - JS/CSS 中的脚本加载顺序(使用 gulp 作为构建系统)

转载 作者:太空宇宙 更新时间:2023-11-04 02:28:20 24 4
gpt4 key购买 nike

我有一个 HTML 文件,testLoader.html:

<head>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('optier-spinner.gif') 50% 50% no-repeat #ccc;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="head.load.js"></script>

等等

我的目标是在加载 JS 脚本时有一个“正在加载”图像(动画 GIF)。问题是 url() 中的图像<style> 中的标签section 是在 JS 文件加载后才获取的,所以对动画没有影响。

加载网络图: enter image description here

如您所见,脚本已加载,并且仅在它们之后加载 GIF 图像。我尝试使用像 head.js 这样的脚本加载器它有效,但我使用 gulp 并且元素的 JS 文件在构建过程中被注入(inject)(并且文件从开发更改为生产),所以据我所知,脚本加载器不是一个选项。

如何在加载其他文件的同时加载和显示图像?

最佳答案

发生这种情况的原因是因为您同时加载了 cssjavascript文档里面<head> . <script> - 标记是阻塞的,这意味着浏览器会等待它们完成下载和解析,然后再继续呈现页面。

在 css 中定义的图像只会在渲染选择器时下载,这将在加载脚本之后进行。这是最后加载 gif 的方式。

全部移动<script> -收盘前的标签</body> -tag 以确保它们不会阻止浏览器并最后执行。

关于javascript - JS/CSS 中的脚本加载顺序(使用 gulp 作为构建系统),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36967237/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com