
为什么不想用 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); })(); 1 zangbob 2015-12-20 21:42:32 +08:00 并没有什么作用,图片一次全部加载完了。或者我用的姿势不对? |
2 LEFT 2015-12-20 21:52:42 +08:00 via iPhone 用你的 lazyload 还得把所有图片地址改一遍? |
3 starandtina 2015-12-20 22:05:00 +08:00 是挺无聊的,呵呵! |
4 qhxin 2015-12-20 22:12:43 +08:00 其实这样可以节约浏览器的连接数,一定程度上能让加载更顺畅。另外 loading 图片可以先写到 css 里预加载。\(^o^)/ |
5 chairuosen 2015-12-20 22:14:04 +08:00 @zangbob 应该把真实 src 放到 data-src 里, src 里只放 loading 效果或者不放 |
6 loading 2015-12-20 22:15:13 +08:00 via Android 实现方式不妥! 请参考渐进增强原则! |
8 zangbob 2015-12-21 12:40:51 +08:00 @chairuosen 就是参考你这段写的,真实地址放在 data-src 里了 <img class="lazy" data-src="http://img4.tbcdn.cn/tfscom/i3/TB1T6QgHpXXXXXrXVXXXXXXXXXX_!!0-item_pic.jpg" src="http://www.v2ex.com/static/style/img/loading.gif" /> |