UDN-企业互联网技术人气社区

板块导航

浏览  : 920
回复  : 5

[原生js] 原生Js页面滚动延迟加载图片实现原理及过程

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-10 14:21:48 | 显示全部楼层 |阅读模式
  页面滚动加载事件,获取元素在页面里的top值根据滚动条的位置判断何时显示图片;获取元素集合 加载过的图片从集合里删除,具体实现如下,感兴趣的朋友各位可以参考下哈

  原理和过程
  
  1.页面滚动加载事件
  
  2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片
  
  3.获取元素集合 加载过的图片从集合里删除
  
  效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>原生Js页面滚动延迟加载图片</title>
  6. <style type="text/css">
  7. *{margin: 0;padding: 0}
  8. img.scrollLoading{border: 1px solid #ccc;display: block;margin-top: 10px;}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="content"></div>
  13. </body>
  14. </html>
  15. <script type="text/JavaScript">
  16. var _CalF = {
  17. $ : function(object){//选择器
  18. if(object === undefined ) return;
  19. var getArr = function(name,tagName,attr){
  20. var tagName = tagName || '*',
  21. eles = document.getElementsByTagName(tagName),
  22. clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
  23. attr = attr || clas,
  24. Arr = [];
  25. for(var i=0;i<eles.length;i++){
  26. if(eles[i].getAttribute(attr)==name){
  27. Arr.push(eles[i]);
  28. }
  29. }
  30. return Arr;
  31. };
  32. if(object.indexOf('#') === 0){ //#id
  33. return document.getElementById(object.substring(1));
  34. }else if(object.indexOf('.') === 0){ //.class
  35. return getArr(object.substring(1));
  36. }else if(object.match(/=/g)){ //attr=name
  37. return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
  38. }else if(object.match(/./g)){ //tagName.className
  39. return getArr(object.split('.')[1],object.split('.')[0]);
  40. }
  41. },
  42. getPosition : function(obj) { //获取元素在页面里的位置和宽高
  43. var top = 0,
  44. left = 0,
  45. width = obj.offsetWidth,
  46. height = obj.offsetHeight;
  47. while(obj.offsetParent){
  48. top += obj.offsetTop;
  49. left += obj.offsetLeft;
  50. obj = obj.offsetParent;
  51. }
  52. return {"top":top,"left":left,"width":width,"height":height};
  53. }
  54. };

  55. //添加图片list
  56. var _temp = [];
  57. for (var i = 1; i < 21; i ++) {
  58. _temp.push('<img class="scrollLoading" data-src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_' + i + '.jpg" src="http://images.cnitblog.com/blog/150659/201306/23160223-c81dd9aa9a2a4071a47b0ced2c9118bc.gif" /><br />图片' + i);
  59. }
  60. _CalF.$("#content").innerHTML = _temp.join("");

  61. function scrollLoad(){
  62. this.init.apply(this, arguments);
  63. }
  64. scrollLoad.prototype ={
  65. init : function(className){
  66. var className = "img."+className,
  67. imgs = _CalF.$(className),
  68. that = this;
  69. this.imgs = imgs;
  70. that.loadImg();
  71. window.onscroll = function(){
  72. that.time = setTimeout(function(){
  73. that.loadImg();
  74. },400);
  75. }
  76. },
  77. loadImg : function(){
  78. var imgs = this.imgs.reverse(), //获取数组翻转
  79. len = imgs.length;
  80. if(imgs.length===0){
  81. clearTimeout(this.time);
  82. return;
  83. }
  84. for(var j=len-1;j>=0;j--){ //递减
  85. var img = imgs[j],
  86. imgTop = _CalF.getPosition(img).top,
  87. imgSrc = img.getAttribute("data-src"),
  88. offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,//滚动条的top值
  89. bodyHeight = document.documentElement.clientHeight; //body的高度
  90. if((offsetPage+bodyHeight/2) > (imgTop-bodyHeight/2)){
  91. img.src = imgSrc;
  92. this.imgs.splice(j,1);
  93. }
  94. }
  95. }
  96. }

  97. var img1 = new scrollLoad("scrollLoading");
  98. </script>
复制代码

相关帖子

发表于 2017-1-10 14:22:20 来自手机 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

发表于 2017-1-10 14:22:20 来自手机 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

发表于 2017-1-10 15:20:54 | 显示全部楼层
学习
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部