<!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. LeetCode_406. Queue Reconstruction by Height解题思路

    题目如下: Suppose you have a random list of people standing in a queue. Each person is described by a pa ...

  2. Vue.js实现后台菜单切换

    因为刚初学Vue.js,暂时遇到以下问题,待之后解决 点击父节点,怎么隐藏显示子节点 点击父节点或子节点,切换li的class="active" iframe怎么自适应高度 思路 ...

  3. Skyline基本操作模式封装

    skyline基本操作模式 项目中基于skyline的浏览器插件进行二次开发,基本的业务操作模式如下: 工具栏:点击工具栏某个功能,开启操作模式. onFrame:鼠标移动预选对象,在能够拾取或者选定 ...

  4. 如何搭建基于C#和 Appium 的 Android自动测试环境

    本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 如果想做手机端的自动化测试,Appium是首选的测试框架,因为网上使 ...

  5. rocketmq广播消息

    发布与模式实现.广播就是向一个主题的所有订阅者发送同一条消息. 在发送消息的时候和普通的消息并与不同之处,只是在消费端做一些配置即可. Consumer消息消费 public class Broadc ...

  6. <%@ Register TagPrefix="uc1" TagName="user" Src="../Control/user.ascx" %>什么意思？

    TagPrefix定义控件位置的命名空间.有了命名空间制约,就可以在同一个网页里使用不同功能的同名控件. TagName指向所使用控件的名字.在同一个命名空间里的控件名是唯一的.控件名一般都表明控件的 ...

  7. golang 使用匿名结构体的问题

    golang允许使用匿名结构体,形如 type Test struct { param1 struct { param2 string } } 一般在使用的时候可以直接这样初始化 a := Test{ ...

  8. Eclipse 模板

    Eclipse 的模板:推荐一个好的内容 设置注释模板的入口:Window->Preference->Java->Code Style->Code Template 然后展开C ...

  9. Windows7安装 docker-compose的过程

    Docker在Windows7系统上安装成功后[详情见Windows7下docker的安装以及遇到的问题],要用到docker-compose相关命令,而docker-compose相关命令在dock ...

  10. winform 仿web 滑块验证

    winform 仿web 滑块验证 效果如下: 源码下载地址: https://download.csdn.net/download/u011392711/11109687