前端页面优化：javascript图片延迟加载
自己写了个简单的图片延迟加载小插件。 功能如下： 页面刷新，当前屏幕图片直接加载真实地址，body被卷去的部分和下方未显示的部分的img均加载通用图片如：loding.gif 随着屏幕上下滚动加载相应在窗口显示的img真实地址。
此处做了一个简单优化，因为延迟加载是计算每个图片距离顶部的距离然后循环赋值的，我在这里给每个图片定义一个flag标记，如果为false，循环时直接continue。这里还可以直接将图片真实地址赋值的img直接从数组中删除，两种写法从代码的臃肿性和执行的流畅性上尚未做对比。 最后附上简单的使用方法。 下面看插件源码：
| 0 | var loding = function(elm){ |
| 1 | |
| 2 | elm = elm instanceof Array ? elm : [elm]; |
| 3 | |
| 4 | var i = 0, |
| 5 | imgArr = []; |
| 6 | |
| 7 | for(i; i < elm.length; i += 1){ |
| 8 | |
| 9 | everyBox(elm[i]); |
| 10 | |
| 11 | } |
| 12 | |
| 13 | //给每个盒子进行遍历 |
| 14 | function everyBox(box){ |
| 15 | |
| 16 | var imgs = document.getElementsByTagName('img'); |
| 17 | |
| 18 | //遍历每个图片数组 |
| 19 | for(var i = 0; i < imgs.length; i += 1){ |
| 20 | |
| 21 | everyImg(imgs[i]); |
| 22 | |
| 23 | } |
| 24 | |
| 25 | } |
| 26 | |
| 27 | function everyImg(img){ |
| 28 | |
| 29 | var temp = document.body.scrollTop || document.documentElement.scrollTop, |
| 30 | windowH = window.innerHeight; |
| 31 | |
| 32 | img.temp = img.offsetTop; |
| 33 | |
| 34 | img.tempB = img.offsetTop + img.offsetHeight; |
| 35 | |
| 36 | if(img.attributes['data-src']){ |
| 37 | |
| 38 | img.ok = img.attributes['data-src'].nodeValue; |
| 39 | |
| 40 | img.flag = true; |
| 41 | |
| 42 | } |
| 43 | |
| 44 | if(img.flag == true){ |
| 45 | |
| 46 | if(img.temp < temp + windowH && img.tempB > temp){ |
| 47 | |
| 48 | img.src = img.ok; |
| 49 | |
| 50 | img.flag = false; |
| 51 | |
| 52 | } |
| 53 | |
| 54 | imgArr.push(img); |
| 55 | |
| 56 | } |
| 57 | |
| 58 | } |
| 59 | |
| 60 | window.onscroll = function(){ |
| 61 | |
| 62 | var temp = document.body.scrollTop || document.documentElement.scrollTop, |
| 63 | i = 0, |
| 64 | windowH = window.innerHeight; |
| 65 | |
| 66 | for(i; i < imgArr.length; i += 1){ |
| 67 | |
| 68 | if(imgArr[i].flag){ |
| 69 | |
| 70 | if(imgArr[i].temp < temp + windowH && imgArr[i].tempB > temp){ |
| 71 | |
| 72 | imgArr[i].src = imgArr[i].ok; |
| 73 | |
| 74 | imgArr[i].flag = false; |
| 75 | |
| 76 | } |
| 77 | |
| 78 | }else{ |
| 79 | |
| 80 | continue; |
| 81 | |
| 82 | } |
| 83 | |
| 84 | } |
| 85 | |
| 86 | |
| 87 | } |
| 88 | |
| 89 | }; |
插件使用方法，在head内引入loding.js 所有需要使用延迟加载的图片请按如下格式编写 <img src="通用图片地址" data-src="真实图片地址"> 调用方法： loading（elm || [elm,elm,elm]）； 传入原生dom对象或dom对象数组均可。 插件会直接获取盒子内符合条件的img图片绑定延迟加载 延迟加载在线运行地址
- 上一篇 »用javascript预加载图片、css、js的方法研究
- 下一篇 »CSS加载性能优化