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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
vue 中 命名视图的用法实例详解
Aug 14 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
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
详解js中==与===的区别
2017/01/08 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
深入Python函数编程的一些特性
2015/04/13 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
python实现简单神经网络算法
2018/03/10 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Django model反向关联名称的方法
2018/12/15 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
python实现梯度法 python最速下降法
2020/03/24 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
介绍一下代理模式(Proxy)
2014/10/17 面试题
新员工欢迎词
2014/01/12 职场文书
座谈会主持词
2014/03/20 职场文书
我的梦想演讲稿
2014/04/30 职场文书
政府个人对照检查材料
2014/08/28 职场文书
股东授权委托书范文
2014/09/13 职场文书
档案接收函格式
2015/01/30 职场文书
高中政治教师教学反思
2016/02/23 职场文书