原帖地址:http://www.cnblogs.com/dtdxrk/p/3151001.html
原理和过程
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
13 <div id="content"></div>
14
15 </body>
16 </html>
17
18 <script type="text/javascript">
19 var _CalF = {
20 $ : function(object){//选择器
21 if(object === undefined ) return;
22 var getArr = function(name,tagName,attr){
23 var tagName = tagName || '*',
24 eles = document.getElementsByTagName(tagName),
25 clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
26 attr = attr || clas,
27 Arr = [];
28 for(var i=0;i<eles.length;i++){
29 if(eles[i].getAttribute(attr)==name){
30 Arr.push(eles[i]);
31 }
32 }
33 return Arr;
34 };
35
36 if(object.indexOf('#') === 0){ //#id
37 return document.getElementById(object.substring(1));
38 }else if(object.indexOf('.') === 0){ //.class
39 return getArr(object.substring(1));
40 }else if(object.match(/=/g)){ //attr=name
41 return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
42 }else if(object.match(/./g)){ //tagName.className
43 return getArr(object.split('.')[1],object.split('.')[0]);
44 }
45 },
46 getPosition : function(obj) { //获取元素在页面里的位置和宽高
47 var top = 0,
48 left = 0,
49 width = obj.offsetWidth,
50 height = obj.offsetHeight;
51
52 while(obj.offsetParent){
53 top += obj.offsetTop;
54 left += obj.offsetLeft;
55 obj = obj.offsetParent;
56 }
57
58 return {"top":top,"left":left,"width":width,"height":height};
59 }
60 };
61
62
63 //添加图片list
64 var _temp = [];
65 for (var i = 1; i < 21; i ++) {
66 _temp.push('<img class="scrollLoading" data-src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_' + i + '.jpg" src="loading.gif" /><br />图片' + i);
67 }
68 _CalF.$("#content").innerHTML = _temp.join("");
69
70
71 function scrollLoad(){
72 this.init.apply(this, arguments);
73 }
74
75 scrollLoad.prototype ={
76 init : function(className){
77 var className = "img."+className,
78 imgs = _CalF.$(className),
79 that = this;
80 this.imgs = imgs;
81 that.loadImg();
82 window.onscroll = function(){
83 that.time = setTimeout(function(){
84 that.loadImg();
85 },400);
86 }
87 },
88 loadImg : function(){
89 var imgs = this.imgs.reverse(), //获取数组翻转
90 len = imgs.length;
91
92 if(imgs.length===0){
93 clearTimeout(this.time);
94 return;
95 }
96 for(var j=len-1;j>=0;j--){ //递减
97 var img = imgs[j],
98 imgTop = _CalF.getPosition(imgs[j]).top,
99 imgSrc = img.getAttribute("data-src"),
100 offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,//滚动条的top值
101 bodyHeight = document.documentElement.clientHeight; //body的高度
102 if((offsetPage+bodyHeight/2) > (imgTop-bodyHeight/2)){
103 img.src = imgSrc;
104 this.imgs.splice(j,1);
105 }
106 }
107 }
108 }
109
110
111 var img1 = new scrollLoad("scrollLoading");
112
113 </script>
本文链接:http://www.cnblogs.com/dtdxrk/p/3151001.html,转载请注明。
分享到:
相关推荐
个人认为其实最初学习JavaScript最好找到简洁易懂的demo学习,但是往往搜索到一堆的插件,没有一定的js功底看的累,浪费时间,也很难学到什么干货。-
本文实例为大家讲解了javascript瀑布流代码,即...原生Js页面滚动延迟加载图片</title> <style type=text/css> * { margin:0; padding:0 } img.scrollLoading { border:1px solid #ccc; display:block;
原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的...原生Js页面滚动延迟加载图片</title> <style type=”text/css”> *{margin: 0
原生javascript页面图片懒加载效果
原生javascript开发打字游戏---代码重构版本,没有canvas,动态生成div,删除div,增加div的top属性值,window.addEventListener('keydown',function(e){})完成键盘事件判断。希望对你们有一点帮助
原生js图片滚动插件新浪电影大片首页焦点图片滚动切换效果代码
下面小编就为大家带来一篇原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
gzip后不到3k)、可配置性高(可以自定义加载时候动画、加载完后的dom、提前加载的距离)、可扩展性强大(很方便做到指定容器内的滚动、多tab的滚动、异常处理、刷新重新加载等)、性能好(在滚动的时候做了一些性能...
原生js scrollbars滚动条插件设置浏览器竖直滚动条美化.zip
原生js面向对象写的延迟加载效果,自动播放轮播图,无缝滚动三个效果页面。
一款简单原生js文字向上滚动消息框代码,可以用来做网站公告消息、最新动态等模块。
原生js图片实时加载
使用原生javascript + 利用面向对象思想,编写PC端幻灯片特效
原生JS左右滚动焦点图是一款js焦点图,带文标题,带数字索引按钮,鼠标经过数字按钮,左右滚动切换图片,效果不错,代码也很简洁,而且也封装了,可以多次调用。
个人认为其实最初学习JavaScript最好找到简洁易懂的demo学习,但是往往搜索到一堆的插件,没有一定的js功底看的累,浪费时间,也很难学到什么干货。
wap原生js图片滚动切换效果,拖动切换,转金轴效果,兼容pc网页
js原生图片上下无缝滚动 页面经常用到的效果
图片拖拽排序-纯原生js 图片拖拽排序-纯原生js 图片拖拽排序-纯原生js 图片拖拽排序-纯原生js 图片拖拽排序-纯原生js