[How to] Preload images with CSS

Started by Xhanch Studio, May 20, 2011, 09:35:04 AM

previous topic - next topic
Go Down

Xhanch Studio

Images preloading is required to boost your website performance. On your website, you may have another (hidden) images to be displayed on mouse click, or on mouse hover, or something else. If you don't preload these images, your visitor will have to wait for the images to show up. Your visitor may not see valuable information (if you put it on the image) if they don't find quick show up based on an event.

To preload images via CSS, you can do it like this:
Code Select
#preload_images{
    width:0px;
    height:0px;
    display:inline;
    background-image:url(path/to/image1.png);
    background-image:url(path/to/image2.png);
    background-image:url(path/to/image3.png);
    background-image:url(path/to/image4.png);
    background-image:url();
}
Best Regards,
Susanto B.Sc
----------------------------------------------------------------------------
Web development services, WordPress plugin and theme development, PSD to XHTML conversion - http://xhanch.com
Read free manga online - http://authrone.com

Go Up