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请求获取图片，这样加载就很快。