下面这段代码有什么问题么?为啥没有懒加载的效果,一下子都出来了
<html> <head> <style> img{ display:block; width:300px; height:300px; } </style> </head> <body> <input class="btn" type="button" value="删除"> <script>var imgs = document.getElementsByTagName("img"); var lenght = document.getElementsByTagName("img").length; var n = 0; lazyload(); window.onscroll = lazyload; function lazyload(){ var seeheight = document.documentElement.clientHeight var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = n;i<lenght;i++){ if(imgs[i].offsetTop < seeheight + scrolltop ){ if (imgs[i].getAttribute("src")==="default.jpg"){ imgs[i].src = imgs[i].getAttribute("data-src") } n = i+1; } } } </script>
</body> 1
KeepPro 2017-09-02 12:34:36 +08:00 via Android
这排版基本告别前端职业生涯了吧!
|
2
xiaotianhaha OP 我重来,复制过来有问题
<html> <head> <style> img{ display:block; width:300px; height:300px; } </style> </head> <body> <img src="default.jpg" data-src=" " alt=""> <img src="default.jpg" data-src=" " alt=""> <img src="default.jpg" data-src=" " alt=""> <img src="default.jpg" data-src=" " alt=""> <img src="default.jpg" data-src=" " alt=""> <img src="default.jpg" data-src=" " alt=""> <img src="default.jpg" data-src=" " alt=""> <img src="default.jpg" data-src=" " alt=""> <img src="default.jpg" data-src=" " alt=""> <img src="default.jpg" data-src=" " alt=""> <img src="default.jpg" data-src=" " alt=""> <input class="btn" type="button" value="删除"> <script> var imgs = document.getElementsByTagName("img"); var lenght = document.getElementsByTagName("img").length; var n = 0; lazyload(); window.onscroll = lazyload; function lazyload(){ var seeheight = document.documentElement.clientHeight var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; for (var i = n;i<lenght;i++){ var url = imgs[i].getAttribute("data-src") var ourl = imgs[i].src if(imgs[i].offsetTop < seeheight + scrolltop ){ if (imgs[i].getAttribute("src")==="default.jpg"){ if (imgs[i].getAttribute("src")==="default.jpg"){ imgs[i].src = imgs[i].getAttribute("data-src") } n = i+1; } } } </script> </body> |
3
flowfire 2017-09-02 13:23:12 +08:00 via Android
这排版看得我头疼………
|
4
learnshare 2017-09-02 13:27:57 +08:00
贴 gist
|
5
aitaii 2017-09-02 13:35:18 +08:00
```
<html> <head> <style> img{ display:block; width:300px; height:300px; } </style> </head> <body> <input class="btn" type="button" value="删除" /> <script> var imgs = document.getElementsByTagName("img"); var lenght = document.getElementsByTagName("img").length; var n = 0; lazyload(); window.onscroll = lazyload; function lazyload(){ var seeheight = document.documentElement.clientHeight var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; for (var i = n;i<lenght;i++){ if(imgs[i].offsetTop < seeheight + scrolltop ){ if (imgs[i].getAttribute("src")==="default.jpg"){ imgs[i].src = imgs[i].getAttribute("data-src") } n = i+1; } } } </script> </body> </html> ``` |
6
pimin 2017-09-02 13:35:35 +08:00
|
7
aitaii 2017-09-02 13:36:13 +08:00
|
8
FrankFang128 2017-09-02 14:04:45 +08:00
|
9
xiaotianhaha OP 谢谢
|
10
xiaotianhaha OP @pimin 谢谢
|
11
xiaotianhaha OP http://jsbin.com/zasesubeni/edit?html,output
我把代码贴在这里,各位帮忙看下,感激不尽。刚开始用 v2ex,所以不熟悉,各位见谅哈 |
12
xilixjd 2017-09-02 17:33:24 +08:00
最顶部加一行 <!DOCTYPE html>
|
13
autoxbc 2017-09-02 18:45:44 +08:00
V2 真是流行一句话回复,也不管别人能不能看懂
本质上说题主获取视口高度的代码不准确 var seeheight = document.documentElement.clientHeight ; 应该这么写 var seeheight = window.innerHeight ; 这里涉及一些历史遗留的兼容性问题 不声明 DOCTYPE,浏览器按照旧的怪异模式渲染,获取视口要用 document.body.clientHeight 声明了 <!DOCTYPE html>,浏览器按照标准模式渲染,获取视口要用 document.documentElement.clientHeight 题主没有声明 DOCTYPE,却按照标准模式获取,得到的值是不对的 现代浏览器用新的接口获取视口,上面两种都过时了,用这个 window.innerHeight 这里有一些简单的介绍,可以参考一下 http://bazhuang.iteye.com/blog/555932 说点不相关的,懒加载是否有必要,我持保留意见 我自学前端的起因就是去掉网站的懒加载和自动播放 |
14
xiaotianhaha OP @autoxbc 非常感谢,看了你的分享,大概明白了。我今天又和老师沟通了,通过页面滑动看图片的 src 确实是在慢慢变化,只不过在页面上没有那种图片慢慢淡出来的效果。老师说我这就是懒加载,而且加载速度快,是好事啊。还有就是前面确实要加上<!DOCTYPE html>。
|