预加载详解

 预加载的介绍
       资源预加载是另一个性能优化技术，预加载简单来说就是将 所有所需要的资源全部都提前进行请求，把资源都先加载到本地上，这样之后用到的时候，就直接从缓存中取资源就好。

为什么用使用预加载技术呢？
        在网页全部加载之前，对一些内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的要么就会长时间的展示一片空白，直到所有内容加载完毕。

实现预加载的几种办法
        1.单纯使用css 实现预加载

#preload-01 { background : url (http://..../image1.jpg) no-repeat -9999px -99999px}
#preload-02 { background : url (http://..../image2.jpg) no-repeat -9999px -99999px}
#preload-03 { background : url (http://..../image3.jpg) no-repeat -9999px -99999px}

            优点： 容易而高效

            缺点： 该方法加载图片，会和页面中的其他内容一起加载，增加了页面的整体加载时间

        2. css+ js 实现预加载 

function preLoad(){
        document.getElementById('preload-01').style.background= "url(http:......) norepeat -9999px   -99999px "
        document.getElementById('preload-01').style.background= "url(http:......) norepeat -9999px   -99999px "
        document.getElementById('preload-01').style.background= "url(http:......) norepeat -9999px   -99999px "
       
}
function addLoadEvent(func){
            // 获取 window 页面加载完成后，执行的函数
        var oldonLoad = window.onload
                // 如果类型不是 函数，则直接将preLoad 赋值给其
          if(typeof  windwo.onload != 'function'){
           window.onload= func
        }
            // 如果是，则在此基础上，在添加preLoad 函数，让其在页面加载完后执行
          else{
          window.onload= function(){
            if(oldonLoad){
                oldonLoad()
        }
              func()
    }      
    }
}
addLoadEvent(preLoad)

        此方法解决了 单纯使用css的问题，实则就是将其在页面加载完成之后才加载

        3.单纯的使用js也是挺不错的方法

function preloader (){
       var img1 = new Image()
       var img2 = new Image()
       var img3 = new Image()
            img1.src="http:...."
            img2.src="http:...."
            img3.src="http:...."
        
}
function addLazyLoadEvent(func){
       let oldonLoad = window.onload
       if(typeof oldonLoad  !=='function'){
               window.onload=func
    }else{
        window.onload=function(){
          if(oldonLoad){
        oldonLoad()
    }
        func()
    }
    }
}
addLazyLoadEvent(preloader)

 4.利用ajax 实现预加载

        该方法利用DOM，不仅仅可以预加载图片，还可以预加载CSS、JavaScript等相关的东西，相比 于JavaScript，优越之处在于JavaScript 和css的加载不会影响到页面的加载。更简洁、高效。       

用js实现css、js、以及图片的加载

window.onload= function(){
    setTimeout(function(){
    var head =document.getElementsByTagName('head')[0]  // 获取头
    var css =document.createElement('link')  // 创造link标签
    css.type='test/css'   // 类型
     css.rel="stylesheet"   // 外部样式的引入要加
    css.url='http:....css'   //  路径
    var js =document.createElement('script')  // 创script
    js.type= 'test/javascript'
    js.src= 'http:......js'  // 路径    
    head.appendChild(css)  // 添加到head中
    head.appendChild(js) 
    new Image().src='http:......'   // 图片的加载 
},1000) 
}
        用ajax的话，实现js、css、图片的加载
window.onload = function() {  
    setTimeout(function() {  
        // 请求一  加载js
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        // 请求二， 预加载 css文件
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // 加载 图片
        ew Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};

5. 懒加载和预加载的区别
  加载时机不同：懒加载是迟缓加载甚至不加载，  预加载是提前加载

   服务器的影响： 懒加载对前端服务器有一定的缓解压力作用，预加载则会增加服务器的压力