网页性能优化之图片懒加载

一、前言最近因为需要做一个小网站,但是呢,因为图片比较多,打开网页速度很慢,服务器压力就会很大。不仅影响渲染速度还会浪费带宽,比如一个1M大小的图片,并发情况下,达到1000并发,即同时有1000个人访问,就会产生1个G的带宽。于是就想到了图片懒加载来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能,可以大幅度的提高网页加载速度,效果很明显,于是想着将这个方…

大家好,又见面了,我是你们的朋友全栈君。

一、前言

最近因为需要做一个小网站,但是呢,因为图片比较多,打开网页速度很慢,服务器压力就会很大。不仅影响渲染速度还会浪费带宽,比如一个1M大小的图片,并发情况下,达到1000并发,即同时有1000个人访问,就会产生1个G的带宽。于是就想到了图片懒加载来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能,可以大幅度的提高网页加载速度,效果很明显,于是想着将这个方法记录下来,方便以后或者有需要的人使用,方法和功能都是亲测可用,请放心观看。

二、原理

先将 img 标签的 src 链接设为同一张图片(一般是loading.gif图片),然后给 img标签 设置自定义属性( data-src),然后将真正的图片地址存储在 data-src 中,当JS监听到该图片元素进入可视窗口时,将自定义属性中的地址存储到src属性中。达到懒加载的效果。这样做能防止页面一次性向服务器发送大量请求,导致服务器响应面,页面卡顿崩溃等

三、实现

网页loading.gif 素材 :http://www.sucaijishi.com/2013/gif_0527/57.html

  <a  href="javascript:;" class="img" rel="nofollow" >
       <img src="/static/images/utils/loading.gif" th:data-src="${goodList.goodsImg}">
  </a>

Js实现原理

<script>

    // 一开始没有滚动的时候,出现在视窗中的图片也会加载
    start();

    // 当页面开始滚动的时候,遍历图片,如果图片出现在视窗中,就加载图片
    var clock; //函数节流
    $(window).on('scroll',function(){ 
   
        if(clock){ 
   
            clearTimeout(clock);
        }
        clock = setTimeout(function(){ 
   
            start()
        },200)
    })

    function start(){ 
   
        $('.img img').not('[data-isLoading]').each(function () { 
   
            if (isShow($(this))) { 
   
                loadImg($(this));
            }
        })
    }


    // 判断图片是否出现在视窗的函数
    function isShow($node){ 
   
        return $node.offset().top <= $(window).height()+$(window).scrollTop();
    }

    // 加载图片的函数,就是把自定义属性data-src 存储的真正的图片地址,赋值给src
    function loadImg($img){ 
   
        $img.attr('src', $img.attr('data-src'));

        // 已经加载的图片,我给它设置一个属性,值为1,作为标识
        // 弄这个的初衷是因为,每次滚动的时候,所有的图片都会遍历一遍,这样有点浪费,所以做个标识,滚动的时候只遍历哪些还没有加载的图片
        $img.attr('data-isLoading',1);
    }

</script>

四、效果展示

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/126921.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 51单片机设计8位抢答器_51单片机八路抢答器原理图

    51单片机设计8位抢答器_51单片机八路抢答器原理图基于51单片机八路抢答器的设计毕业设计(论文)题目:基于51单片机八路抢答器的设计系部:专业:学号:学生姓名:指导教师姓名:指导教师职称:2013年xx月xx日XXXXXXXX学院(论文)I摘要随着科学技术的发展和普及,各种各样的竞赛越来越多,其中抢答器的作用也就显而易见。目前很多抢答器基本上采用小规模数字集成电路设计,使用起来不够理想。因此设计一更易于使…

    2022年10月20日
  • java 实现 按位异或_Java 按位异或的性质及其妙用

    java 实现 按位异或_Java 按位异或的性质及其妙用文章摘要:1、按位异或,可以简单理解成:不进位加法。即:1+1=0;0+0=0;1+0=1;2、任何数和自己异或结果为零。3、按位异或自反性。两次运算操作,可以将最后的结果还原。4、任何数和0做异或值不变,和1异或结果为原操作数取反。5、交换律。不使用中间变量,交换两个数。一、按位异或具有自反性。即:对同一个数据,进行两次按位异或操作,等于数据本身。intdisplayOptions=0x…

  • jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/现在许多社区,购物等网站都设置签到功能,打开可以收获经验、虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能。本文使

    2021年12月22日
  • Ubuntu14.04使用DEB安装Mysql5.7

    Ubuntu14.04使用DEB安装Mysql5.7基于Debian的mysql5.7软件包安装(ubuntu14.0464bit)

  • java输入数组元素_java数组的输出

    java输入数组元素_java数组的输出1.简介Java中快捷输出数组中各个元素笔者目前所知的就三种方法,今天就简单的做个记录。大家如果有什么更好的方法,麻烦留言评论。2.代码publicclassArrayPrint{publicstaticvoidmain(String[]args){int[]arrays1=newint[]{1,2,3,4};//ThefirstmethodSystem.out…

  • python激活_在线激活「建议收藏」

    (python激活)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号