Javascript 懒加载与预加载（8）

最新推荐文章于 2024-07-29 11:53:27 发布

千寒33

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量557

点赞数

分类专栏： javascript 文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/weixin_52120405/article/details/125024421

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.懒加载
懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

1.1 使用场景
当网站的图片很多或图片比较大时，基于网站性能和用户体验考虑，这时需要用到懒加载。
1.2 原理
初始时，img中的src不赋值（或者赋以一个占位图片），而是将真正的图片地址存在用户自定义属性data-src,当鼠标滚动到可视区时,这时用data-src中的值替换src中的值。
1.3 懒加载的优点？
页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好。

1.4 懒加载步骤

1)首先，不要将图片地址放到 src 属性中，而是放到其它属性 (data-original) 中。

2)页面加载完成后，根据 scrollTop 判断图片是否在用户的视野内，如果在，则将 data-original 属性中的值取出存放到src 属性中。

3)在滚动事件中重复判断图片是否进入视野，如果进入，则将 data-original 属性中的值取出存放到

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>页面懒加载</title>
        <style type="text/css">
            img {
                display: block;
                width: 500px;
                height: 400px;
           }
        </style>
    </head>
    <body>
        <img src="" class="lazyload" datasrc="http://img.taopic.com/uploads/allimg/130104/240392-13010415433920.jpg">
        <img src="" class="lazyload" datasrc="http://old.bz55.com/uploads/allimg/150210/139-150210134411-50.jpg">
        <img src="" class="lazyload" datasrc="http://imgsrc.baidu.com/imgad/pic/item/7c1ed21b0ef41bd5221ae1d15bda81cb39db3d4d.jp
g">
        <img src="" class="lazyload" datasrc="http://imgsrc.baidu.com/imgad/pic/item/faf2b2119313b07e8c62703307d7912397dd8c29.jp
g">
        <img src="" class="lazyload" datasrc="http://imgsrc.baidu.com/imgad/pic/item/7e3e6709c93d70cf48ebdd13f2dcd100baa12b9e.jp
g">
        <script type="text/javascript">
            var imgs = document.querySelectorAll('img.lazyload');
            var n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历
            window.onscroll = function() {
                showImg();
           };
            function showImg(){
                var seeHeight = document.documentElement.clientHeight;
                var scrollTop = document.body.scrollTop ||
document.documentElement.scrollTop;
                for (var i = n; i < imgs.length; i++) {
                    if (imgs[i].offsetTop < seeHeight + scrollTop) {
                        if (imgs[i].getAttribute('src') == '') {
                            imgs[i].src = imgs[i].getAttribute('data-src');
                       }
                        n = i + 1;
                   }
               }
           }
            showImg()  // 第一次进入页面就要调用一次
        </script>
    </body>
</html>

2.预加载
2.1 什么是预加载？
提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
2.2 为什么要使用预加载？
方便网站上冲浪，保证了图片快速、无缝地发布，增加用户体验。
2.3 实现预加载的方法
1）用CSS和JavaScript实现预加载
如果用CSS实现预加载，如果中间某一张图太大，可能会导致后面加载不进来的情况，在前端渲染可能就渲染出来。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #preload-01 { background: url(img/img.jpg) no-repeat -9999px -9999px; }  
            #preload-02 { background: url(img/img2.jpg) no-repeat -9999px -9999px; }  
            #preload-03 { background: url(img/img3.png) no-repeat -9999px -9999px; }
        </style>
    </head>
    <body>
        <div id="preload-01"></div>
        <div id="preload-02"></div>
        <div id="preload-03"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
    </head>
    <body>
       <div id="preload-01"></div>
       <div id="preload-02"></div>
       <div id="preload-03"></div>
       <script type="text/javascript">
           function preloader() {  
               if (document.getElementById) {  
                   document.getElementById("preload-01").style.background =
"url(img/img.jpg) no-repeat -9999px -9999px";  
                   document.getElementById("preload-02").style.background =
"url(img/img2.jpg) no-repeat -9999px -9999px";  
                   document.getElementById("preload-03").style.background =
"url(img/img3.png) no-repeat -9999px -9999px";  
               }  
           }  
            //监听DOM（页面）是否加载完成，只有加载完成后才执行预加载
           function addLoadEvent(func) {  
               var oldonload = window.onload;  
               if (typeof window.onload != 'function') {  //是否一个函数，是则调用函数
                   window.onload = func;  
               } else {  
                   window.onload = function() {   //如果不是一个函数
                       if (oldonload) {  //如果有值即调用
                           oldonload();  
                       }  
                       func();  //否则直接调用函数
                   }  
               }  
           }  
           addLoadEvent(preloader);
       </script>
    </body>
</html>

2）仅使用JavaScript实现预加载（推荐写法）

<script type="text/javascript">
    function preloader() {   // 预加载图片的函数
        if (document.images) {
            var img1 = new Image();  
            var img2 = new Image();  
            var img3 = new Image();  
            img1.src = "http://img.taopic.com/uploads/allimg/130104/240392-
13010415433920.jpg",
                img2.src = "http://old.bz55.com/uploads/allimg/150210/139-150210134411-
50.jpg",
                img3.src =
"http://imgsrc.baidu.com/imgad/pic/item/7c1ed21b0ef41bd5221ae1d15bda81cb39db3d4d.jpg"
       }
   }
    function addLoadEvent(func) {   // 监听文档加载完成之后，再去预加载图片
        var oldonload = window.onload;  
        if (typeof window.onload != 'function') {  
            window.onload = func;  
       } else {  
            window.onload = function() {  
                if (oldonload) {  
                    oldonload();  
               }  
                func();  
           }  
       }  
   }
    addLoadEvent(preloader);
</script>

3）使用Ajax实现预加载

<script type="text/javascript">
    window.onload = function() {  
        setTimeout(function() {
            // 发送请求加载 JS ，CSS文件
            var xhr = new XMLHttpRequest();  
            xhr.open('GET', 'https://code.jquery.com/jquery-3.3.1.min.js');  
            xhr.send('');  
            xhr = new XMLHttpRequest();  
            xhr.open('GET', 
'https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css');  
            xhr.send('');  
            // 加载图片
            new Image().src = "http://img.taopic.com/uploads/allimg/130104/240392-
13010415433920.jpg"; 
       }, 1000);    // 定时器防止请求事件过长
   };
</script>

3.懒加载和预加载的对比
1）概念
懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
2）技术
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一
定的缓解压力作用，预加载则会增加服务器前端压力。
3）实现方式
懒加载：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到
某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。（推荐写法）
预加载：
1.用CSS和JavaScript实现预加载
如果用CSS实现预加载，如果中间某一张图太大，可能会导致后面加载不进来的情况，在前端渲染可能就渲染出来。
2.仅使用JavaScript实现预加载（推荐写法）
3.使用Ajax实现预加载（推荐写法）

千寒33

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 懒加载与预加载（8）

1.懒加载懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。1.1 使用场景当网站的图片很多或图片比较大时，基于网站性能和用户体验考虑，这时需要用到懒加载。 1.2 原理初始时，img中的src不赋值（或者赋以一个占位图片），而是将真正的图片地址存在用户自定义属性dat...
复制链接

扫一扫

专栏目录