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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
面试常见的js算法题
Mar 23 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
JS实现横向跑马灯效果代码
Apr 20 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
深入理解javascript中的this
Feb 08 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 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自定义大小验证码的方法详解
2013/06/07 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python正则实现提取电话功能
2018/02/24 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
Ajax主要包含了哪些技术
2014/06/12 面试题
计算机求职信
2013/12/01 职场文书
太太口服液广告词
2014/03/20 职场文书
公司担保书范文
2014/05/21 职场文书
小学数学课题方案
2014/06/15 职场文书
交通工程专业推荐信
2014/09/06 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
教师四风问题整改措施
2014/09/25 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
本溪水洞导游词
2015/02/11 职场文书
tomcat下部署jenkins的方法
2022/05/06 Servers