js实现图片懒加载效果


Posted in Javascript onJuly 17, 2017

本文实例为大家分享了js图片懒加载的具体代码,供大家参考,具体内容如下

图片懒加载,思路:当鼠标滑动到对应图片的高度时,进行图片的加载;

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #div{
    width: 575px;
    height: auto;
    overflow: hidden;
    border: red 1px solid;
    margin: 0 auto;
    /*给该div设置定位*/
    position: relative;
   }
   #div img{
    width: 267px;
    height: 396px;
    margin-left: 10px;
    border: 1px solid #000;
   }
  </style>
  <script type="text/javascript">
   function getPos(obj){
    var l = 0;
    var t = 0;
    while(obj){
      
     l += obj.offsetLeft;
     t += obj.offsetTop;
     obj = obj.offsetParent;
    }
    return {left:l ,top : t}
   }
   window.onload = window.onscroll = function(){
    //获取到img
     var aImg = document.getElementsByTagName("img");
    //获取到它的scrollTop 值 考虑兼容问题
     var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//    clientHeight = 上下padding + height
     var clientH = document.documentElement.clientHeight;
     //循环遍历每一项通过调用获取到每一个i 项对象的top 值
     for (var i = 0;i<aImg.length;i++) {
      var aImgTop = getPos(aImg[i]).top;
//      当滚动的时候进行判断,看他的滚动的高度加上它的clientHeight 是否比它的 top 值大 
//      如果大或等于说明滚动到当前位置可以加载图片
      if (oScrollTop + clientH >= aImgTop) {
//       进行图片的加载
       aImg[i].src = aImg[i].getAttribute("_src");
      }
     }
   }
  </script>
 </head>
 <body>
  <div id="div">
   <img _src="../img/1.jpg"/>
   <img _src="../img/2.jpg"/>
   <img _src="../img/3.jpg"/>
   <img _src="../img/4.jpg"/>
   <img _src="../img/6.jpg"/>
   <img _src="../img/7.jpg"/>
   <img _src="../img/1.jpg"/>
   <img _src="../img/2.jpg"/>
   <img _src="../img/3.jpg"/>
   <img _src="../img/4.jpg"/>
   <img _src="../img/6.jpg"/>
   <img _src="../img/7.jpg"/>
   <img _src="../img/3.jpg"/>
   <img _src="../img/4.jpg"/>
   <img _src="../img/6.jpg"/>
   <img _src="../img/7.jpg"/>
  </div>
 </body>
</html>

当有类似于瀑布流的布局时常用的加载模式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 #Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 #Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 #Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 #Javascript
node.js express中app.param的用法详解
Jul 16 #Javascript
Node.js中流(stream)的使用方法示例
Jul 16 #Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 #Javascript
You might like
php采集时被封ip的解决方法
2010/08/29 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
python Flask实现restful api service
2017/12/04 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
python collections模块的使用
2020/10/16 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
python中time tzset()函数实例用法
2021/02/18 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
《问银河》教学反思
2014/02/19 职场文书
标准单位租车协议书
2014/09/23 职场文书
教师个人学习总结
2015/02/11 职场文书
银行催款通知书
2015/04/17 职场文书
预备党员转正党小组意见
2015/06/01 职场文书