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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
chrome原生方法之数组
Nov 30 Javascript
php+js实现倒计时功能
Jun 02 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
JS实现的排列组合算法示例
Jul 16 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
详解Vue数据驱动原理
Nov 17 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
怎么使 Mysql 数据同步
2006/10/09 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python psutil监控进程实例
2019/12/17 Python
python 6行代码制作月历生成器
2020/09/18 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
环境工程专业自荐信
2014/03/03 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
财务工作检讨书
2014/10/29 职场文书
倡议书怎么写?
2019/04/11 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸