手撕懒加载

2019-09-11 admin
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>LazyLoad</title>
        <style>
            img {
                display: block;
                margin: 0 auto 100px;
                width: 680px;
                height: 810px;
            }
        </style>
    </head>
    <body>
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-pl/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-bd/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-cg/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-cy/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-gb/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-mj/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-tm/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-wd/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-cj/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-tc/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-cy/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-sl/per.png" alt="">
        <img src="" data-src="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/assets/images/mp-qx/per.png" alt="">

    </body>
    <script>
        var img = document.getElementsByTagName('img');

        //存储图片加载到的位置
        var n = 0;
        // 页面载入完毕加载可视区域内的图片
        lazyLoad();
        // 监听页面滚动事件
        window.onscroll = lazyLoad;

        function lazyLoad() {
            // 可视区高度
            //document.documentElement返回的是文档对象document的根元素的只读属性(如html元素)
            var viewHeight = document.documentElement.clientHeight;
            // 滚动条距离顶部的高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = n; i < img.length; i++) {
                if (img[i].offsetTop < viewHeight + scrollTop) {
                    if (img[i].getAttribute('src') == '') {
                        img[i].src = img[i].getAttribute('data-src');
                    }
                    n = i + 1;
                }
            }
        }
    </script>
</html>

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

[转载]原文链接:https://segmentfault.com/a/1190000020356642

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74862.html

文章标题:手撕懒加载

相关文章
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
Ajax入门手册chm
下载地址:Ajax入门手册chm ...
2015-11-12
angular+ionic 的app上拉加载更新数据实现方法
第一步,首先需要在&lt;ion-content&gt;标签里面加入标签&lt;ion-infinite-scroll ng-if=&quot;hasmore&quot; on-infinite=&quot;loadMore()&quot;...
2017-03-07
css3.0参考手册
下载地址:css3.0参考手册 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
js结合正则实现国内手机号段校验
附加一个utils对象,内含一个校验手机号函数,一个格式化返回数据函数 var isChinaMobile = &#x2F;^134[0-8]\d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|18[2-478])\...
2017-03-25
js+html5实现可在手机上玩的拼图游戏
本文实例讲述了js+html5实现可在手机上玩的拼图游戏。分享给大家供大家参考。具体如下: 手机版的拼图。pc上用Chrome 或者 Firefox var R=(function(){ &#x2F;*右边菜单*&#x2F; functi...
2017-03-27
JavaScript实现滑动到页面底部自动加载更多功能
话不多说,请看代码: &#x2F;&#x2F;滚动条到页面底部加载更多案例 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); &#x2F;&#x2F...
2017-03-17
js判断手机端(Android手机还是iPhone手机)
网上常用的代码 &#x2F;** * [isMobile 判断平台] * @param test: 0:iPhone 1:Android *&#x2F; function ismobile(test){ var u = naviga...
2017-03-27
Html5塑手机浏览器:腾讯X5谋生态链
最近,手机浏览器一系列大事件引人瞩目。 先是搜狐创始人、CEO张朝阳通过微博推荐手机QQ浏览器,而不是自家的搜狗手机浏览器,引起坊间热议。一个以X5为核心的生态圈正在悄然成型。 然后UC浏览器发出微博:“约吗?”,公开挑战其他手机浏览器。当...
2015-11-12
javascript图片预加载实例分析
本文实例讲述了javascript图片预加载的方法。分享给大家供大家参考。具体如下: lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果)。javascript无法获取...
2017-03-27
回到顶部