预加载是什么？懒加载是什么？以及两者之间的区别

最新推荐文章于 2024-04-27 07:45:00 发布

城北的徐公

最新推荐文章于 2024-04-27 07:45:00 发布

阅读量6.4k

点赞数 4

文章标签： webview html android

本文链接：https://blog.csdn.net/qq_48959471/article/details/124782150

版权

1.什么叫懒加载呢？

（1）懒加载的介绍

懒加载其实也叫做延迟加载、按需加载，比如在长网页中延迟加载图片数据，是一种比较好的网页性能优化的方法。在比较长的网页或应用中，如果图片有很多，一下子之间把所有的图片都加载出来的话，耗费很多性能，而且用户说不定会把图片一一全部看完。

如果使用图片的懒加载的话，就可以解决上述问题咯，解决方法就是只加载在可视窗口内的部分图片，其余图片都先不加载，之后随着鼠标的滚轮或者滚动条的滚动，到哪了，哪里才会加载图片，通过这种方式，好处也很明显：

（1）网页的加载速度更快

（2）服务器的负载一定程度的减小了

懒加载的使用，一般适用于图片较多，页面列表较长的场景之中。

（2）懒加载的特点

减少无用资源的加载：使用懒加载明显减小了服务器的压力，减小了浏览器的负担
提升用户的体验：如果同时加载了很多图片的话，那相对来说，用户的等待的时间也会随之增加，这样就很影响用户的体验，而使用懒加载的话，能明显减小用户的等待时间，大大的提升用户的体验感！
防止加载过多的图片而影响其他资源文件的加载：会影响网站应用的正常使用

（3）.懒加载的实现原理

首先我们要明白，图片的加载是怎么产生的？图片的加载是由src属性引起的，当对src赋值时，浏览器就会请求图片资源，根据此特点，我们先用data-load属性来存储图片的路径，在需要加载图片的时候，将data-load 中图片的路径赋值给src，这样就实现了懒加载啦。

（4）.实现一个懒加载

通过JS 实现一个懒加载：

（1）window.innerHeight 获取浏览器可视区域的高度

（2）document.body.scrollTop || document.documentElement.scrollTop 获取浏览器滚动过的距离

（3）xx.offsetTop 是元素的顶部，距离文档顶部的高度

（4）图片的加载条件： xx.offsetTop < window.innerHeight + document.body.scrollTop (即也就是当图片所在位置，进入到了当前浏览器的可视窗口中去)

请看代码啦：

<div>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
    <img  src ='loading.git'  data-load="xx.png'>
</div>

<script>
        var img =document.querySelectorAll('img')
        function lazyLoad(){
                // 获取 浏览器滚动过的距离
       var scrollTop =  document.body.scrollTop ||   document.documentElement.scrollTop
                //   获取 可视区域的高度
            var winHeight= window.innerHeight
            for( var i=0; i<img.length ; i++){
            if(img[i].offsetTop < scrollTop + winHeight){
                    img[i].src =img[i].getAttribute('data-load')

        }
        }
    }
    window.onscroll =   lazyLoad
</script>

2.什么叫预加载呢？

（1）预加载的介绍

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

（2）为什么用使用预加载技术呢？

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

（3）实现预加载的几种办法

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('');  


        // 加载 图片
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};