V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaotianhaha
V2EX  ›  前端开发

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

  •  
  •   xiaotianhaha · 2017-09-02 11:59:34 +08:00 · 2740 次点击
    这是一个创建于 2626 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    <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>
    14 条回复    2017-09-02 23:18:10 +08:00
    KeepPro
        1
    KeepPro  
       2017-09-02 12:34:36 +08:00 via Android
    这排版基本告别前端职业生涯了吧!
    xiaotianhaha
        2
    xiaotianhaha  
    OP
       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
        3
    flowfire  
       2017-09-02 13:23:12 +08:00 via Android
    这排版看得我头疼………
    learnshare
        4
    learnshare  
       2017-09-02 13:27:57 +08:00
    贴 gist
    aitaii
        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>
    ```
    pimin
        6
    pimin  
       2017-09-02 13:35:35 +08:00
    FrankFang128
        8
    FrankFang128  
       2017-09-02 14:04:45 +08:00
    xiaotianhaha
        9
    xiaotianhaha  
    OP
       2017-09-02 14:51:03 +08:00
    谢谢
    xiaotianhaha
        10
    xiaotianhaha  
    OP
       2017-09-02 14:51:45 +08:00
    @pimin 谢谢
    xiaotianhaha
        11
    xiaotianhaha  
    OP
       2017-09-02 15:06:56 +08:00
    http://jsbin.com/zasesubeni/edit?html,output
    我把代码贴在这里,各位帮忙看下,感激不尽。刚开始用 v2ex,所以不熟悉,各位见谅哈
    xilixjd
        12
    xilixjd  
       2017-09-02 17:33:24 +08:00
    最顶部加一行 <!DOCTYPE html>
    autoxbc
        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

    说点不相关的,懒加载是否有必要,我持保留意见
    我自学前端的起因就是去掉网站的懒加载和自动播放
    xiaotianhaha
        14
    xiaotianhaha  
    OP
       2017-09-02 23:18:10 +08:00
    @autoxbc 非常感谢,看了你的分享,大概明白了。我今天又和老师沟通了,通过页面滑动看图片的 src 确实是在慢慢变化,只不过在页面上没有那种图片慢慢淡出来的效果。老师说我这就是懒加载,而且加载速度快,是好事啊。还有就是前面确实要加上<!DOCTYPE html>。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2623 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 05:42 · PVG 13:42 · LAX 21:42 · JFK 00:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.