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中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 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
php数据库连接
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python进程间通信用法实例
2015/06/04 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python实现多线程的两种方式分析
2018/08/29 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
Python读取指定日期邮件的实例
2019/02/01 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
优秀学生干部先进事迹材料
2014/05/26 职场文书
报效祖国演讲稿
2014/09/15 职场文书
党员带头倡议书
2015/04/29 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技