负载&首先显示身体背景图片

发布于 2024-08-07 14:35:21 字数 776 浏览 4 评论 0原文

我遇到以下问题:

我的登陆页面由 2 个图像组成:分配给正文元素的背景图像(顶部横幅)和我展示内容的另一个图像。

我的问题是,这两个图像都非常大,而且我总是必须等待主图像首先显示,而不是背景图像。

这对我来说很烦人,而且看起来不太好。

我创建了一个在线版本,其中包含清晰显示我的问题的示例图像。请检查:这里

我尝试了许多不同的 JavaScript 技术和在线解决方案,但没有一个解决我的问题。

我想要的只是首先显示背景图像,而不是主图像。

这是 html 代码:

<body background='top-banner2.jpg' style='background-position: top center; background-repeat:no-repeat;'>
  <a href="#">
    <img border='0' style='position:absolute; width:965px; left:50%; margin-left:-487px; top:440px;'  src='main2.jpg' />
  </a>
</body>

我对任何解决方案持开放态度,JavaScript、AJAX 等等,只是为了看看它是否有效!

感谢您分享您的时间和专业知识。

一切顺利, 斯皮罗·K.

I have the following problem:

My landing page is composed of 2 images: a background image (top-banner) assigned to the body element and another image where I am presenting my content.

My problem is that both images are quite large and always, I have to wait for the main image to show up first, and than the background image.

This is very annoying for my and it does not look nice.

I have created an online version with sample images that clearly show my problem. Please check it: here

I have tried many different JavaScript techniques and online solutions, but none of them solved my problem.

All I want is the background image to show first, and than the main image.

Here is the html code:

<body background='top-banner2.jpg' style='background-position: top center; background-repeat:no-repeat;'>
  <a href="#">
    <img border='0' style='position:absolute; width:965px; left:50%; margin-left:-487px; top:440px;'  src='main2.jpg' />
  </a>
</body>

I am open to any solution, JavaScript, AJAX, whatever, just to see it working!

Thank you for sharing your time and expertise.

All the best,
Spiro K.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

司马昭之心 2024-08-14 14:35:21

问题是您正在使用背景属性。永远不要再使用它,并停止使用样式属性。将所有演示文稿放入外部样式表中,并使用链接标记链接到它。这样做将解决您的问题,因为 CSS 会随着 DOM 逐渐呈现。

The problem is that you are using the background attribute. Never use that again, and stop using style attributes. Put all your presentation into an external stylesheet and link to it using a link tag. Doing this will solve your problem as the CSS renders progressively with the DOM.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文