原生javascript图片懒加载效果代码。

来源：互联网发布：淘宝上的生发液有用吗编辑：程序博客网时间：2024/05/18 00:58

原理是先获取页面所需懒加载的所有图片对象，然后分别计算图片距离顶部的距离是否小于屏幕可见高度+页面滚动高度，即元素是否从下滚动到眼球可见位置，如果小于，那么将自定义的data-src属性中的值（即图片的URL地址赋值给src属性，完成请求加载）。监听页面滚动事件即可！定义n 值存储起来可以更好的记录到滚动可见的图片，避免重复循环，提高性能。

<!doctype html><html><head>    <title>index</title>    <meta charset="utf-8">    <meta name="renderer" content="webkit">    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >    <meta name="keywords" content="{$web['web_key']}"> <!--关键词-->    <meta name="description" content="{$web['web_description']}">  <!--网站描述--></head><body>    <div style="width:100%;overflow:hidden;"> <!--容器标签开始-->    <!--header start-->        <include file="common/header"/>    <!--header end-->    <!--mainBox start-->    <div class="main">        <div class="article-list">            <div class="container title">                <h5>注册香港公司相关资料</h5>                <!-- <a href="" class="more">查看全部 >></a> -->            </div>            <div class="container list">                <foreach name="art" item="value">                    <dl>                        <dt>                            <img src="" alt="" title="{$value['art_title']}" data-src="">                        </dt>                        <dd class="title">                            <a href=""><strong></strong></a>                        </dd>                        <dd class="detail">                            {$value['art_intro']}                        </dd>                        <dd class="detail">{$value['art_addtime']|date="Y-m-d H:i:s",###}</dd>                        <dd class="consolution">                            <!-- <a href="" target="_blank">立即咨询>></a> -->                            <a href="" title="" target="_blank">了解更多>></a>                        </dd>                    </dl>                </foreach>            </div>        </div>        <!--footer start-->            <include file="common/footer"/>        <!--footer end-->    </div>    <!--mainBox end-->    </div><!--容器标签结束--></body><script>!function(){    //获取元素距离页面顶部的绝对距离    function getAbsPoint(e)    {        var x = e.offsetLeft;        var y = e.offsetTop;        while(e = e.offsetParent)           //等同于while(e.offsetParent){e = e.offsetParent}        {            x += e.offsetLeft;            y += e.offsetTop;        }        return {'x': x, 'y': y};    };    var imgs = document.getElementsByTagName("img");    var num = imgs.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 < num; i++) {            //判断图片距离页面顶部的位置是否小于屏幕可见高度+页面滚动高度，即元素是否从下滚动到眼球可见位置            if (getAbsPoint(imgs[i]).y < seeHeight + scrollTop) {                if (imgs[i].getAttribute("src") == "") {                    imgs[i].src = imgs[i].getAttribute("data-src");                }                n = i + 1;            }        }    }}();</script></html>

1 0