gpt4 book ai didi

javascript - 预加载器在启动 HTML 站点之前加载所有 Assets

转载 作者:行者123 更新时间:2023-11-28 01:05:15 24 4
gpt4 key购买 nike

我目前正在创建一个简单的 HTML 页面。该页面包含图像、音频和背景视频。该页面非常大(总共 5-6 MB)。所以我想做一个加载所有 Assets 然后启动 HTML 站点的预加载器。我只发现动画预加载器会在特定时间后淡出 - 而不是在所有 Assets 的完​​整内容准备就绪时。

您知道这种预加载器的 Javascript 会是什么样子吗?

这是我的代码 - 删除了所有不必要的代码(如元标记)。我已经准备好了 CSS 和 JS 文件:

#backgroundvideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}

.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/master.css">
<link rel="script" href="/js/preloader.js">
</head>

<body>

<!-- Video -->
<video autoplay muted loop id="backgroundvideo">
<source src="/media/joetnar-backgroundvideo.mp4" type="video/mp4">
</video>

<!-- Logo -->
<div class="content">
<img src="/media/joetnar-logo-200.png" alt="JOETNAR Logo" title="JOETNAR Logo">
</div>

<!-- Audio -->
<iframe src="/media/joetnar-intro.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>

</body>

</html>

由于新的谷歌“无音频自动播放”政策,音频通过 iframe 加载。这是一个简单的解决方法,因为 iframe 仍然可以自动启动。

非常感谢!

最佳答案

预加载器的 Javascript 看起来像:

jQuery(document).ready(function($) {
$(window).load(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {});
}, 2000);

});
});

关于javascript - 预加载器在启动 HTML 站点之前加载所有 Assets ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52415072/

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