Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

elementFromPoint 用户浏览了什么?

  昨天的文章中我们说要让用户浏览时再加载数据,但用户到底浏览了什么呢?这当然可以根据页面的布局通过计算滚动条位置来得到,但这会因为页面布局的改变而改变。这时可以使用elementFromPoint,直接根据页面坐标来获取元素,它就不受页面样式限制了。
  elementFromPoint方法传入两个参数,分别为浏览器工作区的x位置和y位置,类似position:fixed定位方式的坐标计算。下面的实例是初始使用占位元素填充,只有浏览到时才插入数据。
<!DOCTYPE html>
<style>
body {margin:0px;}
#panel div {height:20px;border-bottom:1px solid #999;}
</style>
<div id="panel"></div>
<script>
//生成测试用的占位元素
for(var i=0;i<500;i++)
  panel.appendChild(document.createElement("div"));
//滚动时往占位元素里填充数据
onresize=onload=document.onscroll=function(e){
  var h=document.documentElement.clientHeight-1;
  var s=document.elementFromPoint(0,0);
  var e=document.elementFromPoint(0,h);
  e=e.nextElementSibling;
  for(;s&&s!=e;s=s.nextElementSibling)
    //这里是直接填充数据,实际情况会从服务器获取数据
    if(!s.loaded)s.innerHTML="填充数据",s.loaded=true;
};
</script>
  但是这个方法也有一定的局限性,因为它只是以浏览器工作区作为参照,对元素内的滚动条需要实现浏览时加载就不容易使用了。而且它只能获取到已经浏览到的东西,实际上如果想做出更好的用户体验应该把浏览到的部分的邻近数据预先加载。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^