懒加载，预加载实现以及对比

最新推荐文章于 2025-10-09 08:33:07 发布

原创最新推荐文章于 2025-10-09 08:33:07 发布 · 3.4k 阅读

3 ·

CC 4.0 BY-SA版权

css 同时被 3 个专栏收录

6 篇文章

订阅专栏

2 篇文章

订阅专栏

性能优化

1 篇文章

订阅专栏

本文介绍了网页开发中常用的懒加载与预加载技术。懒加载技术可以提高页面加载速度，减轻服务器压力，节省流量；而预加载技术可以提前加载图片，确保图片能够快速无缝展示。此外，还对比了两者的不同之处。

一、懒加载

1.概念：

访问页面时，先把img元素的背景图片src替换成一张占位图，这样只需请求一次，当图片出现在浏览器的可视区域内时，再设置图片的真实路径，显示图片。

2.优点：

页面长图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节约流量。

3.步骤：

页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascript设置了图片路径，浏览器才会发送请求。

1）懒加载先在页面中把需要延迟加载的图片统一使用一张占位图进行占位，把真正的路径存在元素“data-url”属性里。

2）页面加载完成后，通过scrollTop判断图片是否在用户的视野，如果在，则将 data-url的值取出来存放到src中。

3）在滚轮事件中重复判断图片是否进入视中，如果在，则将data-url的值取出来存放到src中。

4.DEMO

<style type="text/css">
    img{
        display: block;
    }
</style>
<body>
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
</body>
<script type="text/javascript">
    var pic=document.getElementsByTagName('img');
    arr=['img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg'];
    for(var i=0;i<arr.length;i++){
        pic[i].setAttribute('src-data', arr[i]);
    }
    for(var i=0;i<4;i++){
        pic[i].setAttribute('src', pic[i].getAttribute('src-data'));
    }
    document.onmousewheel=function(){
                     if(document.body.clientHeight+document.body.scrollTop>=pic[3].offsetTop+pic[3].offsetHeight){
            pic[4].setAttribute('src',pic[4].getAttribute('src-data'));
        }
    }

</script>

5. 插件

成熟的懒加载插件，直接调用方法即可。
jquery.lazyload.js

二、预加载

1.概念：

提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2.优点：

图片预先加载到浏览器中，这对图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时操作得到最快的反映。

3.实现方式

实现预载的方法非常多，比如：用CSS和JavaScript实现预加载；仅使用JavaScript实现预加载；使用Ajax实现预加载。

4.js预加载demo:

常用方法new Image()，设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小。

//要预加载的图片路径
    var limg = ["image/bg1.png","image/bg2.png","image/bg3.png","image/bg4.png"];
    var ind = 0;
    for(var j = 0 ; j<limg.length; j++){
        var img = new Image();
        img.src = limg[j];
        img.onload = function(){
            ind++;
            //加载完成
            if(ind==limg.length){ 
                //write your code...
            }
        }
    }