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

一、前言最近因为需要做一个小网站,但是呢,因为图片比较多,打开网页速度很慢,服务器压力就会很大。不仅影响渲染速度还会浪费带宽,比如一个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)
blank

相关推荐

  • wap 设计的基本原则

    wap 设计的基本原则 由于wap网速慢,输入不是很方便。应该让用户尽量少的输入,尽量少与服务交互。力图让用户很快找到自己感兴趣的东西。尽量少的输入不是不要用户输入。网站界面布局设计必须要有一个统一的理念,力求让用户喜爱,否则网站的风格很可能是自己要的风格,而不是用户喜欢的风格。…

    2022年10月29日
  • app测试用什么工具(目前软件测试工具)

    UI自动化测试工具1.uiautomator2 Github地址:https://github.com/openatx/uiautomator2 star:1.9k 介绍:openatx开源的ui自动化工具,支持android和ios。主要面向的编程语言是python,api设计简洁易用,在开源社区也是很受欢迎。 原理图: 与appium…

  • Javaweb实现旅游管理系统(商城项目)(一)

    Javaweb实现旅游管理系统(商城项目)(一)一.选题的意义及选题内容概述随着信息资源的逐步网络化,信息消费者将被笼罩在巨大的信息网络之中,并由此而具备充分的获取信息的能力。此时,消费者对信息的需求将更具针对性,更为个性化。因此,网络信息服务具有传统信息服务所不具备的双向性,消费者能够更多地参与信息服务的过程,从而加速个性化服务时代的到来。锻炼自己的操作能力,将大学理论课程的学习转化为动手能力提高的基础。通过本系统,用户可以方便查询旅

  • 【算法题】单例模式的8种实现方式(java版)「建议收藏」

    【算法题】单例模式的8种实现方式(java版)「建议收藏」根据马士兵老师的视频整理下来的8种单例模式的实现方式,在此记录一下。代码示例1:饿汉式packagecom.examples.singleton;publicclassMgr01{publicstaticvoidmain(String[]args){Mgr01m1=Mgr01.getInstance();Mgr01m2=Mgr01.getInstance();System.out.println(m1…

  • Java项目—图书馆[通俗易懂]

    Java项目—图书馆[通俗易懂]//Library.book包//book包下Book类packageLibrary.book;publicclassBook{privateStringname;privateStringauthor;privateStringid;privateintprice;privateStringtype;…

  • js中join方法

    js中join方法js中的join方法join方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。大白话:join方法可以用符不同的分隔符来构建这个字串。join方法值接受一个参数,即用作分隔符的字符串,然后返回所有数组项的字符串。vararr=["red","yellow","blue"];vararray=[];下面开始调用join方法1a…

发表回复

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

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