Javascript优化-懒加载和预加载

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

原创最新推荐文章于 2024-04-27 07:45:00 发布 · 281 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #web #javascript #前端

Javascript 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了懒加载和预加载两种图片加载策略。懒加载用于提高网页加载速度，当图片进入可视区时才加载，减少服务器压力；预加载则是在页面加载完成后预先加载图片，提升用户体验。文中提供了JavaScript实现懒加载和预加载的示例，并对比了两者的优缺点。

2.2.1 用CSS和JavaScript实现预加载

2.2.2仅使用JavaScript实现预加载

2.2.3 使用ajax实现预加载

三.懒加载和预加载对比

一.懒加载

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

1.1使用场景

当网站的图片比较大时，基于网站性能和用户体验考虑，这时需要用到懒加载。

1.2原理

初始时，img中的src不赋值（或者赋以一个占位图片），而是将真正的图片地址存在用户自定义属性data-src，当鼠标滚动到可视区时，这时用data-src中的值替换src中的值。

1.3 懒加载的优点

页面加载速度快，可以减轻服务器的压力，节约了流量用户体验好

1.4 图片懒加载的实现（可视化加载）

function lazyload(imgs) {
    // 获取屏幕的高度
    var height=document.documentElement.clientHeight;
    // 获取滚轮的位置
    var scrollTop=document.documentElement.scrollTop;
    // 遍历图片（根据其高度判断其显示状态）
    for (let n = 0; n < imgs.length;  n++) {
        // 某图片离顶部位置<页面高度+滚轮位置(已用空间)
        if (imgs[n].offsetTop<height+scrollTop) {
            if (!imgs[n].getAttribute('src')) {
                imgs[n].setAttribute('src',imgs[n].getAttribute('data-src'));
                // n=n+1
            }
        }
    }
}

二.预加载

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

2.1 使用预加载的原因

保证图片快速、无缝的发布，增加用户体验

2.2 实现预加载的方法

2.2.1 用CSS和JavaScript实现预加载

单纯使用CSS，可容易、高效地预加载图片。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #preload1 {background: url(img/tu1.jpg) no-repeat -9999px -9999px;}
        #preload2 {background: url(img/tu2.jpg) no-repeat -9999px -9999px;}
        #preload3 {background: url(img/tu3.jpg) no-repeat -9999px -9999px;}
    </style>
</head>
<body>
    <div id="preload1"></div>
    <div id="preload2"></div>
    <div id="preload3"></div>
    <img src="file:///F:/WebCode/basics/Phase2/day2_Javascript%E4%BC%98%E5%8C%96/img/tu1.jpg" alt="" srcset="">
</body>

这种方法的思路是通过css去加载所需要的图片，但是通过背景位置的调整到页面之外的部分，可是图片还是被浏览器缓存了。之后再页面的其他地方我们还是可以直接使用，从缓存中读取。此方法会出现一种情况,如果这个CSS代码在加载的时候读取到需要加载背景图，正好背景图又比较大，这样整个页面的耗时比较厉害。

我们最好是等到页面加载完成之后再去加载需要预加载的图。那这个时候，我们使用JS来进行加载还是比较友好的。代码如下:

// 加载图片操作
    function preloader() {
        if (document.getElementById) {
            document.getElementById('preload1').style.background = 'url(img/tu1.jpg) no-repeat -9999px -9999px';
            document.getElementById('preload2').style.background = 'url(img/tu2.jpg) no-repeat -9999px -9999px';
            document.getElementById('preload3').style.background = 'url(img/tu3.jpg) no-repeat -9999px -9999px';
        }
    }
    // 监听页面加载是否完成，若完成则预加载
    function addloadEvent(func) {
        document.onreadystatechange = function () { 
            if (document.readyState == "complete") { 
                func();
            }
        }
    }
    addloadEvent(preloader);

2.2.2仅使用JavaScript实现预加载

该方法尤其适用预加载大量的图片。

 // 加载图片操作
     function preloader() {
        if (document.images) {
            var img1=new Image();
            var img2=new Image();
            var img3=new Image();
            img1.src='img/tu1.jpg'
            img2.src='img/tu2.jpg'
            img3.src='img/tu3.jpg'
        }
    }
    // 监听页面加载是否完成，若完成则预加载
    function addloadEvent(func) {
        document.onreadystatechange = function () {//即在加载的过程中执行下面的代码
            if (document.readyState == "complete") {//complete加载完成
                func();
            }
        }
    }
    console.log(document.images);
    addloadEvent(preloader);

2.2.3 使用ajax实现预加载

使用Ajax实现图片预加载的方法利于DOM，不仅可以加载图片还可以加载CSS、JS等。

使用Ajax的优越之处在于JavaScript和css的加载不会影响到当前页面。

 window.onload = function () {
        setTimeout(() => {
            var xhr2 = new XMLHttpRequest();
            xhr2.open('get', 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js');
            xhr2.send('');

            var xhr3 = new XMLHttpRequest();
            xhr3.open('get', 'https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.core.js');
            xhr3.send('');
            new Image().src = "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3097653549,3802607912&fm=15&gp=0.jpg"; 
            xhr2.onreadystatechange=function(){
                if(xhr2.status==200&&xhr2.readyState==4){
                    console.log(xhr2.responseText);
                }
            }
        }, 1000);
    }