Load & show body background image first_问答_开发者

开发者 https://www.devze.com 2022-12-08 09:48 出处：网络

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.

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开发者_StackOverflow中文版 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.

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.