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 名称冲突的解决方法
Apr 08 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
javascript判断office版本示例
Apr 11 Javascript
在JavaScript中使用timer示例
May 08 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
koa-passport实现本地验证的方法示例
Feb 20 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 sprintf()函数用例解析
2011/05/18 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
angular.extend方法的具体使用
2017/09/14 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
js实现简单的秒表
2020/01/16 Javascript
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python descriptor(描述符)的实现
2020/11/15 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
大学自荐信
2013/12/12 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
Javascript的promise,async和await的区别详解
2022/03/24 Javascript