tangram框架响应式加载图片方法


Posted in Javascript onNovember 21, 2013

各种网站经常看到页面滚动到可视区域,然后才加载相应的图片资源,他的本质是什么呢?本文来分析一下很简单,就是判断当前元素是否是可视区域内

假设:h1 = 滚动条滚去的高度
w1 = 滚动条滚去的宽度
h2 = 屏幕的高度
obj 表示当前对象 {x:当前对象相对于文档左上角的位置x,y:当前对象相对于文档左上角的y}

则应该这样判断
在y轴方向上:if(obj.x>h1&&obj.x<h1+h2||obj.x+obj.offsetHeight>h1&&|obj.x+obj.offsetHeight<h1+h2){loading()}
同理在X轴方向上以此类推

如果使用tangram框架的话可以这样写:

baidu.more = baidu.more||{};
baidu.more.scrollLoading = (function(){
var top = baidu.page.getScrollTop(),
left = baidu.page.getScrollLeft(),
viewHeight  = baidu.page.viewHeight(),
viewWidth  = baidu.page.viewWidth();
var scrollLoad = function(element){
   var obj = baidu.g(element)||{};
   var pos = baidu.dom.getPosition(element);
if((pos.top>top&&pos.top<top+viewHeight)||
(pos.top+obj.offsetHeight>top&& pos.top+obj.offsetHeight<top+viewHeight)||
(pos.left>left&&pos.left<left+viewWidth)||
(pos.left+obj.offsetWidth>left&&pos.left+obj.offsetWidth<left+viewWidth)){
loading();
};
 return {
scrollLoad :scrollLoad 
} 
})()
Javascript 相关文章推荐
JavaScript中“+=”的应用
Feb 02 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
详解node中创建服务进程
May 09 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
使图片旋转的3种解决方案
Nov 21 #Javascript
js单例模式详解实例
Nov 21 #Javascript
Ajax同步与异步传输的示例代码
Nov 21 #Javascript
jquery与prototype框架的详细对比
Nov 21 #Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 #Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 #Javascript
探讨javascript是不是面向对象的语言
Nov 21 #Javascript
You might like
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP加密解密实例分析
2015/12/25 PHP
设定php简写功能的方法
2019/11/28 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
秘书专业自荐信范文
2013/12/26 职场文书
教师旷工检讨书
2014/01/18 职场文书
行政专员求职信范文
2014/05/03 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
国际商务专业求职信
2014/07/15 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书