图片懒加载原理「建议收藏」

/**图片的懒加载*只有当页面滚动到图片位置显示的时候才去加载图片;一开始图片的位置可以方一张小的默认图*优势:提升页面的加载速度*在移动端省流量;**实现的原理:监听页面滚动;当页面滑倒图片位置的时候,再去让图片显示(图片的src换成真正的链接);**//**需求:当页…

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

/*
* 图片的懒加载
* 只有当页面滚动到图片位置显示的时候才去加载图片; 一开始图片的位置可以方一张小的默认图
* 优势: 提升页面的加载速度
* 在移动端省流量;
*
* 实现的原理:监听页面滚动;当页面滑倒图片位置的时候,再去让 图片显示(图片的src换成真正的链接) ;
* */

/*
*需求: 当页面滑动 图片的头部刚刚露出来时;让图片的链接换成 img/2.jpg
* */
  function imgLoad(ele) { 
   
        // var tarT = ele.offsetTop;
        var tarT = ele.offsetTop + ele.clientHeight;
        var cliH = document.documentElement.clientHeight || document.body.clientHeight;
        var scrH = document.documentElement.scrollTop;
        if(scrH+cliH > tarT){
            // 说明头部 已经露出来
            ele.src = 'img/2.jpg'
        }
    };
    var img = document.getElementsByTagName('img')[0];
    window.onscroll = function () { 
   
        imgLoad(img);
    }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

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

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

(0)


相关推荐

  • servlet的工作原理_hibernate工作原理

    servlet的工作原理_hibernate工作原理图一图二为sevlet。图三为springmvc

  • idea在线生成激活码(注册激活)「建议收藏」

    (idea在线生成激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlECCD1ZV74P-eyJsaWNlbnNlSW…

  • windowsform_winform拖动控件

    windowsform_winform拖动控件
    ControlFindControl(stringcontrolName,ControlfatherControl){foreach(ControlcinfatherControl.Controls){if(c.Name==controlName){returnc;}}returnnull;}

    2022年10月19日
  • 三角函数公式和图像大全[通俗易懂]

    三角函数公式和图像大全[通俗易懂]初等函数的图形幂函数的图形指数函数的图形对数函数的图形三角函数的图形反三角函数的图形各三角函数值在各象限的符号三角函数的性质反三角函数的性质三角函数公式两角和公式倍角公式三倍角公式半角公式和差化积积化和差诱导公式万能公式其它公式其他非重点三角函数双曲函数公式一…

  • java项目源码分享——适合新手练手的java项目

    java项目源码分享——适合新手练手的java项目源码下载(实例一):jsp开发完整的博研图书馆后台管理系统,不使用框架开发的,太完美了源码下载(实例二):javaWeb图书馆管理系统源码mysql版本源码下载(实例三)GitHub-uboger/LibraryManager:JAVAGUI图书馆管理系统源码下载(实例四):javaswing开发企业人事管理系统源代码下载源码下载(实例一):javaswing开发网…

  • oracle number存储小数

    oracle number存储小数创建字段paraAnumber(16,2);16是存储整形的长度,2是小数的长度,存储数据格式为:16.22反之paraAnumber(16,3)存储数据格式为:16.333转载于:https://www.cnblogs.com/fuzhaoyang56/archive/2013/05/21/3090811.html…

发表回复

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

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