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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2645 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

<html> <head> <style> img{ display:block; width:300px; height:300px; } </style> </head> <body>

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>

14 条回复 • 2017-09-02 23:18:10 +08:00

KeepPro

2017-09-02 12:34:36 +08:00 via Android

这排版基本告别前端职业生涯了吧！

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="">

<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 via Android

这排版看得我头疼………

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>。