首页 > web前端 > js教程 > tangram框架响应式加载图片方法_javascript技巧

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

WBOY
发布: 2016-05-16 17:13:19
原创
1224 人浏览过

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

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

则应该这样判断
在y轴方向上:if(obj.x>h1&&obj.x

h1&&|obj.x+obj.offsetHeight

同理在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

(pos.top+obj.offsetHeight>top&& pos.top+obj.offsetHeight

(pos.left>left&&pos.left

(pos.left+obj.offsetWidth>left&&pos.left+obj.offsetWidth

loading();

};

 return {

scrollLoad :scrollLoad

} 

})()

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板