<!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. javascript 函数后面有多个小括号f( )( )( )...

    有时我们看见js函数后面跟着多个小括号是什么意思?f( )( )( )... f()执行f函数,返回子函数 f()()执行子函数,返回孙函数 f()()()执行孙函数,返回重孙函数 ... ... 但 ...

  2. Snapde电子表格支持的文件格式

    Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它运行的速度非常快,反应非常灵敏.那么它支持哪些文件格式呢? 1.CSV文件格式,是一种以逗号分隔列.以回车分隔行的文本文 ...

  3. 生鲜配送管理系统_升鲜宝V2.0 价格组功能 操作说明_15382353715

    价格组功能是B端供应链系统,必不可少的一个功能,其主要实现不同的客户不同的价格,B端系统有一个最大的不同就是,有些商品后台下单人员能看到的.有些商品在销售的那一瞬间,还不知道价格.所以这些商品只有后台 ...

  4. appium入门元素识别参考

    https://www.cnblogs.com/miniren/p/7365885.html#top

  5. MyDAL - in && not in 条件 使用

    索引: 目录索引 一.API 列表 C# 代码中 接口 IList.Contains() 方法生成 SQL 对应的 in(val1,val2,... ...) 如:.Queryer<Agent& ...

  6. MySQL Error Number 1005 Can’t create table（Errno：150）

    mysql数据库1005错误解决方法 MySQL Error Number 1005 Can’t create table ‘.\mydb\#sql-328_45.frm’ (errno: 150) ...

  7. 我喜欢的vs code快捷键for mac

    mac上的快捷键,尽量是像我用vs studio上靠近. cmd+K+S: 显示快捷键列 cmd+shift+p: 系统配置命令行 cmd+p:项目中文件列表,选择文件 cmd+shift+o:当前文 ...

  8. emacs 只读打开文件

    emacs 只读打开文件 : C-x C-r emacs 让buffer区变成只读 : C-x C-q emacs 让只读buffer区变成可以保存修改 : C-x C-q

  9. Docker + Sonarqube 环境搭建

    Sonar概述 Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具. 一,postgres 数据库下载 docker pul ...

  10. composer包(发布到github上)同步到Packagist

    在上一篇文章里面,探讨了如何一步步建立composer包–创建你的一个composer包 创建完成后,我们需要做的就是讲自建的包发布到Packagist上.至于说什么是Packagist,这个就不用我 ...