无聊，不想用 jquery lazyload，自己手工写了个简短代码，欢迎批评指正收藏

[dbfox]

为什么不想用 jquery lazyload ？
1 需要依赖庞大的 jquery 库，有点大材小用
2 部分（低配）手机上面渲染执行速度太慢
3 感觉之前的 lazyload 写的并不是非常好
我写的 lazyload 我也不敢说好，但是目前符合我的要求，来这里也是学习下

代码如下：

放到页面最底部就可以了

<img class="lazy" data-src="http://img4.tbcdn.cn/tfscom/i3/TB1T6QgHpXXXXXrXVXXXXXXXXXX_!!0-item_pic.jpg" src="/static/style/img/loading.gif" />

是根据 class="lazy" data-src="" 这两个 html 属性来解析的。


```
(function () {
var sign = "lazy";
var imgsArray = [];
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i];
var dsrc = img.getAttribute('data-src');
var cname = img.className;
if (cname && cname.indexOf(sign) >= 0 && dsrc && img.src != dsrc) {
imgsArray.push(img);
}
}
var b = document.body;
var loadAreaImages = function () {
var bst = b.scrollTop;
var bsl = b.scrollLeft;
var ih = window.innerHeight;
var iw = window.innerWidth;
for (var i = 0; i < imgsArray.length; i++) {
var img = imgsArray[i];
var dsrc = img.getAttribute('data-src');
if (dsrc && img.src != dsrc) {
var iot = img.offsetTop;
var iol = img.offsetLeft;
if (ih + bst + 100 >= iot && iw + bsl + 100 >= iol && bst - 100 <= iot && bsl - 100 <= iol) {
img.src = dsrc;
}
}
}
}
var lst = null;
var loadImages = function () {
if (lst) {
clearTimeout(lst);
}
lst = setTimeout(loadAreaImages, 500);
}
var bind = function (e, f) {
var l = window.addEventListener;
var w = window.attachEvent;
l ? l(e, f, true) : w('on' + e, f);
}
var eves = ['load', 'scroll', 'resize'];
for (var e in eves)
bind(eves[e], loadImages, true);
})();
```

[zangbob]

并没有什么作用，图片一次全部加载完了。或者我用的姿势不对？

[LEFT]

用你的 lazyload 还得把所有图片地址改一遍？

[starandtina]

是挺无聊的，呵呵！

[qhxin]

其实这样可以节约浏览器的连接数，一定程度上能让加载更顺畅。另外 loading 图片可以先写到 css 里预加载。\(^o^)/

[chairuosen]

@zangbob 应该把真实 src 放到 data-src 里， src 里只放 loading 效果或者不放

[loading]

实现方式不妥！
请参考渐进增强原则！

[dbfox]

@LEFT 必须的啊

[zangbob]

@chairuosen 就是参考你这段写的，真实地址放在 data-src 里了
<img class="lazy" data-src="http://img4.tbcdn.cn/tfscom/i3/TB1T6QgHpXXXXXrXVXXXXXXXXXX_!!0-item_pic.jpg" src="/static/style/img/loading.gif" />