TUTORIAL: Preload images with CSS

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Introduction


So you want to preload images? There are two ways of doing this. The first is with Javascript, and you may be concerned that the user has Javascript turned off in his/her browser. The second alternative however, uses only CSS and (X)HTML, and I am going to show you the CSS (X)HTML way.

Where it can be used


Let's say you have a site that sells diamond necklaces, and you have now seen (from your control panel or any other source) that most users enter through your index/home page, and then they continue to the "products" page, and then they leave, this may be because they arrive on the products page and they have to wait for images to load and it takes too long, so what we'll do is, preload the images on the index/home page already, and when they arrive on the "products" page, the images are already loaded in the cache, or partially at least.

The CSS:


The CSS for this solution is very simple indeed, so simple, it only takes one line of code, and that line of code looks as follows:
Code: [ Select ]
img.hiddenpic{display:none}

Yes, that is all you need to add in your CSS file to preload images. So when you add an image with this class to your HTML the images will be loaded into the cache for future use, but they will not be displayed on the page because of the "display:none" that will hide the images from the user.

The (X)HTML


So here we are going to have a look at the code of our index/home page. We are already going to preload the images on this page, so that when the user browses to the "products" page, the images are already preloaded into the cache. This part should be placed right at the bottom of your page, just before the </body> tag, this way, all the other images on the page will load first and then the ones that need to be preloaded for the next page.
Code: [ Select ]
...
<img src='diamonds-1.jpg' alt='beautiful silver diamond necklace' class='hiddenpic' />
<img src='diamonds-2.jpg' alt='something special' class='hiddenpic' />
<img src='diamonds-3.jpg' alt='diamonds are a girl's best friend' class='hiddenpic' />
<img src='diamonds-4.jpg' alt='coming soon' class='hiddenpic' />
</body>
  1. ...
  2. <img src='diamonds-1.jpg' alt='beautiful silver diamond necklace' class='hiddenpic' />
  3. <img src='diamonds-2.jpg' alt='something special' class='hiddenpic' />
  4. <img src='diamonds-3.jpg' alt='diamonds are a girl's best friend' class='hiddenpic' />
  5. <img src='diamonds-4.jpg' alt='coming soon' class='hiddenpic' />
  6. </body>


Conclusion


CSS gives a much better alternative for preloading images because it will always be rendered by the browser, where as Javascript could be turned off, and this code is much easier to implement than Javascript.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

Awesome righteous_trespasser... I haven't thought about doing it this way. Why not do it inside a div?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Yeah that could work aswell ... then just set that whole div to "display:none" ...
  • alisha0512
  • Novice
  • Novice
  • alisha0512
  • Posts: 26

Post 3+ Months Ago

Hi,
i am not aware of CSS. So please tell me how will i design a page with the help of CSS?
  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 481

Post 3+ Months Ago

That's a nice idea you've got there, but from an accessibility point of view, JavaScript might be better: if a browser doesn't support JavaScript, (or it's disabled) the images won't be preloaded - there aren't any side effects. On the other hand, if a browser doesn't support CSS, the user ends up seeing those images on the page, something we don't possibly want - the goal of XHTML/CSS is to make pages more accessible by separating the actual content from the formatting, so you should try to avoid adding stuff in HTML that isn't part of the page's actual content.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

...but if the browser doesn't support css, my whole website won't work at all?? all my styling is done in css....... I think most people's, these days. what browsers don't support css??

anyhow looks brilliant and simple R_T - I'll definitely give it a go with the botanical garden website. Thanks!!!!
  • Bjorn
  • Born
  • Born
  • Bjorn
  • Posts: 1

Post 3+ Months Ago

Quote:
Let's say you have a site that sells diamond necklaces, and you have now seen (from your control panel or any other source) that most users enter through your index/home page, and then they continue to the "products" page, and then they leave, this may be because they arrive on the products page and they have to wait for images to load and it takes too long, so what we'll do is, preload the images on the index/home page already, and when they arrive on the "products" page, the images are already loaded in the cache, or partially at least.


If the users leave the products page because images are loading too slowly, and you instead place those images on the home page - wouldn't the same users just leave the site from the homepage?

Introducing code into a page that's never intended to be seen is semantically incorrect, and a better solution would be to optimize the images or split the page up into smaller pages if there are just too many images.
Moderator Remark: Removed personal link

Post Information

  • Total Posts in this topic: 7 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 3 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.