CSS Image Preloading

Here is a way to preload images that will be used in a page with just plain old CSS, no JavaScript required.

Example Code: CSS Selector

div#ImageLoader {display:none}



Example Code: HTML

21 <div id=“ImageLoader”>

22 <img src=“http://www.mysite.com/images/home_hover.jpg&#8221; width=“1” height=“1”/>

23 <img src=“http://www.mysite.com/images/coin_hover.jpg&#8221; width=“1” height=“1”/>

24 <img src=“http://www.mysite.com/images/logout_hover.jpg&#8221; width=“1” height=“1”/>

25 …

26

Published by

Tim Clark

Experienced Business Owner, Chief Information Officer, Vice President, Chief Software Architect, Application Architect, Project Manager, Software Developer, Senior Web Developer, Graphic Designer & 3D Modeler, University Instructor, University Program Chair, Academic Director. Specialties: Ruby, Ruby on Rails, JavaScript, JQuery, AJAX, Node.js, React.js, Angular.js, MySQL, PostgreSQL, MongoDB, SQL Server, Responsive Design, HTML5, XHTML, CSS3, C#, ASP.net, Project Management, System Design/Architecture, Web Design, Web Development, Adobe CS6 (Photoshop, Illustrator)

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s