新手求教， js 懒加载的问题

2017-09-02 11:59:34 +08:00
 xiaotianhaha

下面这段代码有什么问题么？为啥没有懒加载的效果，一下子都出来了

<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>
2644 次点击
所在节点    前端开发
14 条回复
KeepPro
2017-09-02 12:34:36 +08:00
这排版基本告别前端职业生涯了吧！
xiaotianhaha
2017-09-02 12:40:41 +08:00
我重来，复制过来有问题
<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>
flowfire
2017-09-02 13:23:12 +08:00
这排版看得我头疼………
learnshare
2017-09-02 13:27:57 +08:00
贴 gist
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>
```
pimin
2017-09-02 13:35:35 +08:00
aitaii
2017-09-02 13:36:13 +08:00
https://gist.github.com/anonymous/7e4bc54b133ccb7d70023de0a059e3a7
FrankFang128
2017-09-02 14:04:45 +08:00
jsbin.com
xiaotianhaha
2017-09-02 14:51:03 +08:00
谢谢
xiaotianhaha
2017-09-02 14:51:45 +08:00
@pimin 谢谢
xiaotianhaha
2017-09-02 15:06:56 +08:00
http://jsbin.com/zasesubeni/edit?html,output
我把代码贴在这里，各位帮忙看下，感激不尽。刚开始用 v2ex，所以不熟悉，各位见谅哈
xilixjd
2017-09-02 17:33:24 +08:00
最顶部加一行 <!DOCTYPE html>
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

说点不相关的，懒加载是否有必要，我持保留意见
我自学前端的起因就是去掉网站的懒加载和自动播放
xiaotianhaha
2017-09-02 23:18:10 +08:00
@autoxbc 非常感谢，看了你的分享，大概明白了。我今天又和老师沟通了，通过页面滑动看图片的 src 确实是在慢慢变化，只不过在页面上没有那种图片慢慢淡出来的效果。老师说我这就是懒加载，而且加载速度快，是好事啊。还有就是前面确实要加上<!DOCTYPE html>。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/387641

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX