<!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. element表格添加序号

    表格代码:黄色部分为序号列关键代码上图: <el-table :data="tableData" border height="480" style=&q ...

  2. div在另一个div居中对齐

    position:fixed; top:0; right:0; left:0; bottom:0; margin:auto;

  3. Spring笔记

    Spring概念 Spring是一个开源的轻量级的框架 Spring核心主要两部分 (1) Aop面向切面编程,扩展功能不是修改源代码实现 (2) Ioc控制反转, 比如说有一个类,在类里面有方法(不 ...

  4. 前端开发之基础知识-HTML（一）

    1.1 html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网 ...

  5. 虚拟机安装windows7 VMware12 安装window7

    闲来无事就来搞虚拟机装操作系统!期间出现很多错误,分享一下 一.安装虚拟机 二.准备安装的镜像文件 我下载的是windows7纯净版 深度技术里面下载的(http://www.xitongzhijia ...

  6. Python基础之if判断，while循环，循环嵌套

    if判断 判断的定义 如果条件满足,就做一件事:条件不满足,就做另一件事: 判断语句又被称为分支语句,有判断,才有分支: if判断语句基本语法 if语句格式: if 判断的条件: 条件成立后做的事 . ...

  7. Webstorm 2017.3激活破解

    之前尝试过各种激活破解办法,不过随着版本的不断升级,激活信息都失效了(毕竟咱不是通过正常途径激活的),只能重新激活.而且难度越来越大,记得早先网上有人分享激活码,激活的server地址,破解程序等等, ...

  8. Scrapy框架-CrawlSpider

    目录 1.CrawlSpider介绍 2.CrawlSpider源代码 3. LinkExtractors:提取Response中的链接 4. Rules 5.重写Tencent爬虫 6. Spide ...

  9. 【Linux基础】Linux命令date 日期时间

    1.显示到纳秒 date +%F.%H:%M:%S.%N --:38.740127086 date +%Y-%m-%d.%H:%M:%S.%N2019-04-25.00:28:24.060756673 ...

  10. Java jar包启动脚本

    #!/bin/bash APP_HOME=/wdcloud/app/rps/rps-module-admin APP_JAR=rps-module-admin-*.jar APP_PIDS=$(ps ...