css技巧蒐集

圖片預加載

來源: css寫做建議和性能優化小結

這裏說的預加載，不是懶加載。首先根據我我的理解科普下，懶加載和預加載的區別。

懶加載：頁面加載的時候，先加載一部份內容（通常是先加載首屏內容），其它內容等到須要加載的時候再進行加載！

預加載：頁面加載的時候，先加載一部份內容（通常是先加載首屏內容），其它內容等到先加載的一部份內容（通常是首屏內容）加載完了，再進行加載。

兩種方式，都是爲了減小用戶進入網站的時候，更快的看到首屏的內容！

下面栗子，將這#preloader這個元素加入到到html中，就能夠實現經過CSS的background屬性將圖片預加載到屏幕外的背景上。只要這些圖片的路徑保持不變，當它們在web頁面的其餘地方被調用時，瀏覽器就會在渲染過程當中使用預加載（緩存）的圖片。簡單、高效，不須要任何JavaScript。

#preloader {
    /*須要預加載的圖片*/
    background: url(image1.jpg) no-repeat,url(image2.jpg) no-repeat,url(image3.jpg) no-repeat;
    width: 0px;
    height: 0px;
    display: inline;
}複製代碼

可是這樣會有一個問題，由於#preloader預加載的圖片，會和頁面上的其餘內容一塊兒加載，增長了頁面的總體加載時間。因此須要用js控制

function preloader(urlArr,obj) {
    var bgText='';
    for(var i=0,len=urlArr.length;i<len;i++){
        bgText+='url('+urlArr[i]+') no-repeat,';
    }
    obj.style.background=bgText.substr(0,bgText.length-1);
}
window.onload = function() {
   preloader(['image1.jpg','image2.jpg','image3.jpg'],document.getElementById('preloader'));
}複製代碼

原理也很簡單，就是先讓首屏的圖片加載完，而後再加載其它的圖片。經過給#preloader設置背景圖片，加載所須要的圖片，而後頁面上須要加載這些圖片的時候，就直接從緩存裏面拿圖片，不須要經過http請求獲取圖片，這樣加載就很快。