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

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


相关推荐

  • 郴州市高考一段录取率(郴州市第一中学高考喜报)

    很多家长关心郴州2020年最新的中学排名,选择一所好的中学尤为重要,本文小编整理了一些关于2020年郴州最新的中学排名相关数据,仅供参考。一、郴州中学排名前十名名单排名学校名称1临武县第一中学2湖南省资兴市立中学3宜章县第一中学4湖南省郴州市第一完全中学5汝城县一中6桂阳县第一中学7安仁县第一中学8郴州市第二中学9永兴县第一中学10桂阳县第三中学11桂东县第一中学12嘉禾县第一中学二、郴州中学排名…

  • GPIB-VC编程

    GPIB-VC编程CompilingandLinkingVISAPrograms(C/C++)Thissectionprovidesasummaryofimportantcompiler-specificconsiderationswhendevelopingWin32applications.1.LinkingtoVISALibrariesYourapp

  • shell字符串匹配正则_shell字符串替换

    shell字符串匹配正则_shell字符串替换一、简介     BashShell提供了很多字符串和文件处理的命令。如awk、expr、grep、sed等命令,还有文件的排序、合并和分割等一系列的操作命令。grep、sed和awk内容比较多故单独列出,本文只涉及字符串的处理和部分文本处理命令。二、字符串处理1、expr命令expr引出通用求值表达式,可以实现算术操作、比较操作、字符串操作和逻辑操作等

  • MySql数据库增删改查常用语句命令「建议收藏」

    MySql数据库增删改查常用语句命令「建议收藏」文章目录增删改查语句库操作表操作增删改查实例准备表插入数据修改表数据删除表数据查询表数据常见的MySQL语句命令常见MySQL字段含义增删改查语句增删改查的语句命令为:操作命令增insert删delete改update查select或者show库操作操作代码创建数据库createdatabaseshujuku;…

  • miRNA几大常用的数据库

    miRNA几大常用的数据库

  • wordpress博客近期变慢之解决(fonts.google.com)「建议收藏」

    wordpress博客近期变慢之解决(fonts.google.com)

发表回复

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

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