純css的預載圖片

原理是先設定一份css的背景樣式然後再隱藏它,因此是看不到圖片的 但是他還是存在 所以達到預先下載的功能

css的部份

#preloader{
/*Imsges you want to preload*/
background-image:url(image1.jpg);
background-image:url(image2.jpg);
width: 0px;
height: 0px;
display: inline;
}

html部分

<div id="preloader"></div>

延伸作法 把圖片合成成一張大張的圖 這樣只需要下載一張
然後利用div區塊只顯示設定的寬高內區域的特性
對背景設定它的垂直 水平 位移量 這樣也是能夠有預載的功能
因為圖片都是同一張