1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         img {
  8.             display: block;
  9.             margin-bottom: 50px;
  10.             width: 400px;
  11.             height: 400px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  17.     <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  18.     <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
  19.     <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
  20.     <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  21.     <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  22.     <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  23.     <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  24.     <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
  25.     <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  26.     <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  27. </body>
  28.  
  29. <script>
  30.     var num = document.getElementsByTagName('img').length;
  31.     var img = document.getElementsByTagName("img");
  32.     var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
  33.     lazyload(); //页面载入完毕加载可是区域内的图片
  34.     //window.onscroll = lazyload;
  35.     function lazyload() { //监听页面滚动事件
  36.         var seeHeight = document.documentElement.clientHeight; //可见区域高度
  37.         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
  38.         for (var i = n; i < num; i++) {
  39.             if (img[i].offsetTop < seeHeight + scrollTop) {
  40.                 if (img[i].getAttribute("src") == "") {
  41.                     img[i].src = img[i].getAttribute("data-src");
  42.                 }
  43.                 n = i + 1;
  44.             }
  45.         }
  46.     }
  47.  
  48. // 简单的节流函数
  49. //fun 要执行的函数
  50. //delay 延迟
  51. //time  在time时间内必须执行一次
  52. function throttle(fun, delay, time) {
  53.     var timeout,
  54.         startTime = new Date();
  55.     return function() {
  56.         var context = this,
  57.             args = arguments,
  58.             curTime = new Date();
  59.         clearTimeout(timeout);
  60.         // 如果达到了规定的触发时间间隔，触发 handler
  61.         if (curTime - startTime >= time) {
  62.             fun.apply(context, args);
  63.             startTime = curTime;
  64.             // 没达到触发间隔，重新设定定时器
  65.         } else {
  66.             timeout = setTimeout(function(){
  67.                 fun.apply(context, args);
  68.             }, delay);
  69.         }
  70.     };
  71. };
  72. // 实际想绑定在 scroll 事件上的 handler
  73. //function lazyload(event) {}
  74. // 采用了节流函数
  75. window.addEventListener('scroll',throttle(lazyload,500,1000));
  76.  
  77. </script>
  78. </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. Head First设计模式读书笔记

    阅读指南: 精读一章内容,手工输入一章代码(注1),与书中描述的思想进行印证,实在搞不懂就放过吧.设计模式绝对不会一次就看懂的. 这本书对于理解设计模式很有帮助,就是例子不太符合中国人的思维模式,但是 ...

  2. 关于视频断点续播和H5的本地存储

    前段时间,需要在下实现一个视频的断点续播功能,呃,我不会呀,这就很尴尬了.然后呢,在下就想起了一个叫做localStorage的东西.这是个什么东西呢?在网上查阅了一些资料后,在下发现这是webSto ...

  3. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

  4. Python-函数小结

    原文出处,如有侵权,请联系删除. 用户自定义.py文件 如果你已经把my_abs()的函数定义保存为abstest.py文件了,那么,可以在该文件的当前目录下启动Python解释器,用from abs ...

  5. lambda 怎么传递ref参数

    lambda 传递ref参数有个语法bug,必须要显式书写参数类型. //如 delegate bool FuncType(ref int num); FuncType func1; func1 = ...

  6. Serial Splitter 4.2 串口拆分说明

    使用方法 有些设备和程序只能使用COM端口.如果计算机没有COM端口,或者已经被其他应用程序占用,则需要创建虚拟串行端口.在串行分配器中,我们使用虚拟串行端口驱动程序技术,它可以在系统中创建任意数量的 ...

  7. centos7 安装 pyspider 出现的一系列问题及解决方案集合

    先安装python3 和 pip3 wget https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz 安装zlib-devel包(后面安装pi ...

  8. xcode10下，Build Phases下没有Embed Frameworks

    升级xcode10后发现,Build Phases下,找不到Embed Frameworks了,最后发现在General下,有一项“Embedded Binaries",可以在这里添加Fra ...

  9. zoj 3605

    链接 [https://vjudge.net/contest/293343#problem/F] 题意 就是有n碗,有一个宝石,知道开始宝石在那个碗下面 进行M次交换,但知道其中的k次,问你最可能在那 ...

  10. 解决hash冲突的方法

    复制粘贴于:https://www.cnblogs.com/wuchaodzxx/p/7396599.html#H1_2 开放地址法(线性探测法.二次探测.伪随机探测) 再哈希法 链地址法 建立公共溢 ...