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 无提示关闭窗口脚本
Aug 17 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
20行python代码实现人脸识别
2019/05/05 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
交通专业个人自荐信格式
2013/09/23 职场文书
自我鉴定模板
2013/10/29 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
岗位明星事迹材料
2014/05/18 职场文书
个人求职自荐信范文
2014/06/20 职场文书
教师演讲稿开场白
2014/08/25 职场文书
红色旅游心得体会
2014/09/03 职场文书
个人汇报材料范文
2014/12/30 职场文书