【前端优化】js图片懒加载及优化

一、前言

为啥要对图片使用懒加载？我们首先来聊聊这个问题，对于页面来说架子啊速度影响着最大的就是图片，一张普通的图片可以达到4-5M的大小，而代码压缩也就只有几十KB。当页面图片过多的时候，页面加载速度很缓慢，一个页面加载几秒没有完成，用户体验不好，会丧失很多用户的。

所以对于图片过多的页面，可以为了加速页面加载速度，很多时候我们需要将页面内未出现的可视区域内的图片先不加载，等到滚动到可视区的时候录再去加载。这样子对于页面加载性能上会有很大的提升，也就提高了用户体验。

二、原理

1、将页面中的img标签src指向一张小图片或者src为空，

2、然后定义data-src属性（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。

3、src指向一张默认的图片，否则当src为空的时候也会像服务器发送一次请求（指向默认的一张图片那就只需要请求一次）。可以指向loading的地址。

4、当载入页面时，先把可视区区域内的img标签的data-src属性值赋值给src。

5、然后监听滚动事件，加载用户即将看到的图片（利用图片出现时距离顶部的高度 < 滚动条距离顶部的高度 + 可视区的高度）。

注意：图片要指定宽高

关于窗口各种宽度，给出网上的好图。

三、图片懒加载的实现代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        img {

            display: block;

            margin-bottom: 50px;

            width: 800px;

            height: 400px;

        }

    </style>

</head>

<body>

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg6.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg7.png" alt="">

    <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">

    <img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t" alt="">

    <img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg" alt="">

    <img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt="">

    <img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t" alt="">

    <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg8.png" alt="">

    <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg10.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg11.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg15.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg16.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg17.png" alt="">

<script>

    (function(){

    let num = document.getElementsByTagName('img').length;

    let img = document.getElementsByTagName("img");

    let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

    lazyload(); //页面载入完毕加载可是区域内的图片

     window.onscroll = lazyload;

    function lazyload() { //监听页面滚动事件

        let seeHeight = document.documentElement.clientHeight; //可见区域高度

        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度

        for (let i = n; i < num; i++) {

            // 图片未出现时距离顶部的距离大于滚动条距顶部的距离+可视区的高度

            if (img[i].offsetTop > seeHeight + scrollTop) {

                if (img[i].getAttribute("src") == "") {

                    img[i].src = img[i].getAttribute("data-src");

                }

                n = i + 1;

            }

        }

    }

    })()

</script>

</body>

</html>

四、使用节流函数进行优化

如果直接将函数绑定在scroll事件上，当页面滚动时，函数会被高频触发，这非常影响浏览器性能。

同时还有以下场景往往由于事件频繁被触发，因而频繁执行dom操作，资源加载等重行为，导致UI停顿甚至浏览器奔溃。

1、window对象的resize，scroll事件；

2、拖拽时的mousemove事件；

3、射击游戏中的mousedown，keydown事件；

4、文字输入，自动完成的keyup事件；

解决这个问题的方法有去防抖和节流的方法：

1、防抖动原理：当调用动作n毫秒后，才会执行，若这n毫秒内又调用此动作则重新计算执行时间。

不足:当我一直滚动鼠标的时候，lazyload函数就会不断被延迟，这样只有停下来的时候才会执行，那么再有些需要及时显示的情况下，就显得不那么友好了

2、节流原理：预设一个执行周期，如果这个周期结束了都还没有触发函数，那就会执行一次函数；如果这个周期还没有结束就触发函数，那定时器将重置，开始新周期。

达到了想要的效果，既没有频繁的执行也没有延迟执行

五、运用节流函数的图片懒加载代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        img {

            display: block;

            margin-bottom: 50px;

            width: 800px;

            height: 400px;

        }

    </style>

</head>

<body>

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg6.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg7.png" alt="">

    <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">

    <img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t" alt="">

    <img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg" alt="">

    <img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt="">

    <img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t" alt="">

    <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg8.png" alt="">

    <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg10.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg11.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg15.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg16.png" alt="">

    <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg17.png" alt="">

<script>

    (function(){

    let num = document.getElementsByTagName('img').length;

    let img = document.getElementsByTagName("img");

    let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

    lazyload(); //页面载入完毕加载可是区域内的图片

    function lazyload() { //监听页面滚动事件

        let seeHeight = document.documentElement.clientHeight; //可见区域高度

        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度

        for (let i = n; i < num; i++) {

            // 图片未出现时距离顶部的距离大于滚动条距顶部的距离+可视区的高度

            if (img[i].offsetTop > seeHeight + scrollTop) {

                if (img[i].getAttribute("src") == "") {

                    img[i].src = img[i].getAttribute("data-src");

                }

                n = i + 1;

            }

        }

    }

    //采用了节流函数

        function throttle(fun, delay, time) {

    let timeout,

        startTime = new Date();

    return function() {

        let context = this,

            args = arguments,

            curTime = new Date();

        clearTimeout(timeout);

        // 如果达到了规定的触发时间间隔，触发 handler

        if (curTime - startTime >= time) {

            fun.apply(context, args);

            startTime = curTime;

            // 没达到触发间隔，重新设定定时器

        } else {

            timeout = setTimeout(fun, delay);

        }

    };

};

window.addEventListener('scroll',throttle(lazyload,500,1000));

    })()

</script>

</body>

</html>

【前端优化】js图片懒加载及优化的更多相关文章

JS图片懒加载
简介当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
js 图片懒加载
图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...
前端如何实现图片懒加载(lazyload) 提高用户体验
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
js图片懒加载（滚动加载）是否生效
一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
js图片懒加载（滚动加载）判断是否生效
一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
web性能优化之js图片懒加载
html <div class="container"> <ul> <li> <div id="first" clas ...
js——图片懒加载
<img class="js-lazy-image centered" src="./img/dog-running.svg" width="4 ...
原生js图片懒加载特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

随机推荐

上传图片时，使用GDI+中重绘方式将CMYK图片转为RGB图片
原文:上传图片时,使用GDI+中重绘方式将CMYK图片转为RGB图片我们知道,如果网站上传图片时,如果用户上传的是CMYK图片,那么在网站上将是无法显示的,通常的现象是出现一个红叉.下面使用将Ima ...
张量（tensor）的理解
1. 从标量到矢量:携带更丰富的信息矢,是箭的意思,突出的特点是其指向性. 袋子里有几个球? 3 个,magnitude(幅度,没有单位): 从这到你家多远?3 km(denominate),3 称 ...
ORACLE 11G在相同的linuxserver从实施例1满库到实例2上
早期的导出命令: [root@powerlong4 ~]# su - oracle [oracle@powerlong4 ~]$ export ORACLE_SID=pt1; [oracle@powe ...
python 教程第十三章、特殊的方法
第十三章. 特殊的方法 1) 特殊的方法 __init__(self,...) 这个方法在新建对象恰好要被返回使用之前被调用. __del__(self) 恰好在对象要被删除之前调用. __st ...
通过浏览器调用Android要么iOS应用
在做移动应用的单点登录时间,需要点击浏览器中启动链接APP和参数传递APP其中,用于处理相应的接口,现在,通过浏览器调用Android和iOS在应用过程中实现理清固化博客.为了查询. 一:通过浏览器调 ...
CefSharp部分效果实现
CefSharp For WPF隐藏滚动条 CefSharp For WPF自定义右键菜单栏 CefSharp For WPF响应页面点击事件
JS window下面的对象
) •Js脚本一执行就会访问服务器.超链接诶还需要点击. getElementById(), (非常常用),根据元素的Id获得对象,网页中id不能重复.也可以直接通过元素的id来引用元素,但是有有效范 ...
读BeautifulSoup官方文档之html树的搜索(1)
之前介绍了有关的四个对象以及他们的属性, 但是一般情况下要在杂乱的html中提取我们所需的tag(tag中包含的信息)是比较复杂的, 现在我们可以来看看到底有些什么搜索的方法. 最主要的两个方法当然是 ...
jquery 鼠标经过延时触发事件，jquery插件
jquery 鼠标经过延时触发事件. 用来做:鼠标经过选项卡,延时切换,鼠标经过商城分类延时显示,最好不过,防止用户随便滑动就切换了选项卡. 一.引入jq 二.加入以下插件代码 /* * 鼠标经过延时 ...
huawei 通过BGP的团体属性进行路由控制
网络拓扑 XRV1的配置: =========================================================================== # sysname ...

【前端优化】js图片懒加载及优化

【前端优化】js图片懒加载及优化的更多相关文章

随机推荐

热门专题