<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        img {

            display: block;

            margin-bottom: 50px;

            width: 400px;

            height: 400px;

        }

    </style>

</head>

<body>

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

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

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

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

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

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

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

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

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

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

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

</body>

<script>

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

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

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

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

    //window.onscroll = lazyload;

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

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

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

        for (var 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;

            }

        }

    }

// 简单的节流函数

//fun 要执行的函数

//delay 延迟

//time  在time时间内必须执行一次

function throttle(fun, delay, time) {

    var timeout,

        startTime = new Date();

    return function() {

        var context = this,

            args = arguments,

            curTime = new Date();

        clearTimeout(timeout);

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

        if (curTime - startTime >= time) {

            fun.apply(context, args);

            startTime = curTime;

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

        } else {

            timeout = setTimeout(function(){

                fun.apply(context, args);

            }, delay);

        }

    };

};

// 实际想绑定在 scroll 事件上的 handler

//function lazyload(event) {}

// 采用了节流函数

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

</script>

</html>

来源：https://blog.csdn.net/lost_wen/article/details/62416521

js实现一个长页面中的图片懒加载即滚动到其位置才加载的更多相关文章

  1. 在JSP页面中调用另一个JSP页面中的变量

    在jsp学习中,经常需要在一个jsp页面中调用另一个jsp页面中的变量,下面就这几天的学习,总结一下. jsp页面之间的变量调用有多种方法: 1.通过jsp的内置对象—request对象获取参数: ( ...

  2. JSP 页面中插入图片

    第一步 在 JSP 页面中插入图片 EL 表达式 ${pageContext.request.contextPath } 的值为当前的项目名称 <html> ... <body> ...

  3. js文件需要jsp页面中的div时，此js文件必须在div之后才能获得值，否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  4. sprytabbedpanels.js库之在页面中插入Tabbed Panels

    向页面加入sprytabbedpanels.js文件.<script src="SpryAssets/SpryTabbedPanels.js" type="text ...

  5. js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  6. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  7. vue项目中实现图片懒加载的方法

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

  8. Vue项目中实现图片懒加载

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...

  9. js实现点击上下按钮，图片向上向下循环滚动切换

    //popup.js //jquery.1.4.2-min.js (function(p,j){function u(){if(!c.isReady){try{v.documentElement.do ...

随机推荐

  1. 如何让nextcloud支持avi文件在线播放

    默认的nextcloud是不支持avi文件播放的,google查了一圈,都说是没法支持. 然而我觉得都是html5写的,为啥偏偏不支持. 查了一些资料,发现还是官方的代码少写了东西,可能是没考虑那么全 ...

  2. 【抱怨文】vscode对多项目支持不够友好

    vscode是一个简单的开发工具,启动快,速度快.但是当前1.26版本对多项目支持好像有点问题.命令行有个dotnet sln,但是只能添加新项目,却没有创建解决方案的命令.如果强行添加他会提示没有解 ...

  3. MyDAL - .IsExistAsync() 使用

    索引: 目录索引 一.API 列表 .IsExistAsync() 用于 单表 / 多表连接 查询 二.API 单表-便捷 方法 举例 1.单表-便捷, 判断是否存在方法 var date = Dat ...

  4. SQLServer更改用户定义的数据库角色

    更改用户定义的数据库角色注意事项 需具有以下一项或多项权限或成员身份才能运行此命令: 对角色具有 ALTER 权限 对数据库具有 ALTER ANY ROLE 权限 具有 db_securityadm ...

  5. NVIDIA-SMI系列命令总结

    1  NVIDIA-SMI介绍 nvidia-smi简称NVSMI,提供监控GPU使用情况和更改GPU状态的功能,是一个跨平台工具,它支持所有标准的NVIDIA驱动程序支持的Linux发行版以及从Wi ...

  6. LeetCode算法题-1-bit and 2-bit Characters（Java实现）

    这是悦乐书的第302次更新,第321篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第170题(顺位题号是717).有两个特殊字符,第一个字符可以用一个比特0表示,第二个字 ...

  7. SpringBoot中集成Swagger2

    1.依赖jar <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-s ...

  8. [POI2015]PUS

    嘟嘟嘟 这题只要往正确的方面想,就很简单. 首先,这是一道图论题! 想到这,这题就简单了.对于两个数\(i\)和\(j\),如果\(i\)比\(j\)大,就从\(i\)向\(j\)连边.然后如果图中存 ...

  9. wifi扫描

    获取当前位置的wifi,信道,强度,mac #include "ESP8266WiFi.h" IPAddress apIP(192, 168, 4, 1); void setup( ...

  10. 使用axios 的post请求下载文件，

    axios({ method: 'post', data: param, responseType:'blob', url: _urls + '/Downloaddata' }).then(data= ...