gpt4 book ai didi

javascript - 加载 gif 加载时间过长

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

我有一个网站,上面有很多繁重的前端功能,我正在使用加载 gif 来减轻我的加载麻烦。然而,我注意到,特别是在 Safari 中(可能因为它是一个通常较慢的浏览器)加载 gif 的背景加载,然后将近八秒后,gif 加载,此时页面的其余部分完成加载和网站出现。这似乎是对整个效果的一种浪费。

有什么方法可以让这个 gif 更早加载,以便 gif 在页面的其余部分加载之前播放?

这是我的网站:http://bmgz.rtcgraphics.com/

谢谢!

HTML:

<html class="js">
<body>
<div id="preloader-gif"></div>
<!-- the rest of the website -->
</body>
</html>

CSS:

.js div#preloader-gif {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
overflow: visible;
background: #333 url(img/ajax-loader.gif) no-repeat center center;
}

JS:

$(document).ready(function(){
$(window).load(function(){
$('#preloader-gif').fadeOut('slow',function(){$(this).remove();});
});
});

最佳答案

哇,22mb,加载时间超过 3 分钟。您是否希望任何人都不会认为他们的浏览器崩溃并离开?

无论如何,进入主题我认为您在 Safari 中遇到的问题是由于您的图像是从样式表加载的。所以首先浏览器找到样式表,下载它并开始解析它。当发生这种情况时,html 的其他部分可能已经被解析,并且其他资源可能在到达您的 gif 之前已经排队等待下载。

因此,请尝试将您的加载器放在 body 顶部的常规 img-tag 中,以确保尽快加载它,您甚至可以将其放在屏幕外,然后继续使用您的 css 解决方案将其居中,如果你想要,但 img-tag 应该确保它尽早加载。

关于javascript - 加载 gif 加载时间过长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25166150/

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