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

网络编程 2025/1/20 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

假设：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

}　

})()

响应式加载,tangram

标签：

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“tangram框架响应式加载图片方法”

暂无tangram框架响应式加载图片方法的评论...

2025年01月20日