CODEWITHSUNDEEP
htmlcss
AMC
AMC

Reputation: 3

How to preload images using CSS?

I'm trying to implement this code to preload images, but it isn't working.

Add CSS:

div#preload { display: none; }

In the footer within the </body> tag:

<div id="preload">
    <img src="http://gearenergy.com/wp-content/uploads/2018/04/Home-Banner-final.jpg" width="1140px" height="500px" alt="Home-Banner_01" />
    <img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background.jpg" width="550px" height="400px" alt="PresentationBG_02" />
    <img src="http://gearenergy.com/wp-content/uploads/2018/07/orange-color-overlay.png" width="600px" height="600px" alt="FinanceReportBG_03" />
    <img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background-blue.jpg" width="550" height="400" alt="LatestNewsBG_04" />
</div>

Obviously I've replaced the HTML and repointed to the images, but it's still not working.

Upvotes: 0

Views: 1069

Answers (1)

Bharata
Bharata

Reputation: 14155

Personally I would use JavaScript in this case. But if you want only CSS you can preload all images in a div tag which is positioned in hidden part of window like follows:

#preload
{
    position:absolute;
    top:-9999px;
    left:-9999px;
}

<div id="preload">
    <img src="http://gearenergy.com/wp-content/uploads/2018/04/Home-Banner-final.jpg" width="1140px" height="500px" alt="Home-Banner_01" />
    <img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background.jpg" width="550px" height="400px" alt="PresentationBG_02" />
    <img src="http://gearenergy.com/wp-content/uploads/2018/07/orange-color-overlay.png" width="600px" height="600px" alt="FinanceReportBG_03" />
    <img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background-blue.jpg" width="550" height="400" alt="LatestNewsBG_04" />
</div>

Upvotes: 2

Related Questions