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 相关文章推荐
在js中单选框和复选框获取值的方式
Nov 06 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP通用检测函数集合
2006/11/25 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
详解Python的Lambda函数与排序
2016/10/25 Python
python中sys.argv函数精简概括
2018/07/08 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python实现简易动态时钟
2018/11/19 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
使用python实现飞机大战游戏
2020/03/23 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
毕业生求职简历的自我评价
2013/10/23 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
党员承诺书内容
2014/03/26 职场文书
委托书范文
2014/04/02 职场文书
交通事故和解协议书
2014/09/25 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android