0

我对我正在处理的网站进行了一些修改,现在,当我加载主页时,标题图像似乎在页面的其余部分留下空白之后加载,然后图像加载它会将页面的其余部分向下推到它应该在的地方。这个网站是用 HTML、CSS 和 JS 从头开始​​创建的。该网站是https://www.visionwebdesign.ca所以你可以看看。一旦网页在浏览器缓存中,它就可以正常加载。

标题实际上是图像轮播的一部分。这是我正在使用的代码:

视觉网页设计...

我尝试将图像缩小到更小的尺寸,但没有运气。寻找任何可用的帮助。

J.P

4

2 回答 2

1

这可能不是您正在寻找的答案,但是查看 HTML 页面代码,您似乎只是使用 IMG 标签非常正常地加载图像,那里没有使用脚本代码,因此任何延迟都可能只是它所花费的时间用于将图像从服务器下载到浏览器。我在加载标题图像时看到了一点延迟(在 Firefox 和 Chrome 中都试过),但我的互联网连接速度为 300Mbps,所以一切都相当快。

图像大小可能是一回事。或者将内容 DIV 设置为display:none直到第一个图像加载之后,然后使用 Javascript 切换它。我在 Stack Overflow 上找到了这个例子

于 2021-08-24T00:17:56.057 回答
0

解决此问题的一种方法是将整个身体隐藏 2 秒或加载身体所需的时间。我们可以使用 Javascript 来做到这一点:

var timeouttimer = setTimeout(showbody, 2000);
var everything = document.getElementById("allcontent");
function showbody {
everything.style.display = "block";
}

然后在 HTML 中添加以下 div 围绕您网页的所有内容:

<div id="allcontent" style="display: none;">
于 2021-08-27T03:26:10.500 回答