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

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



<html>

<head>

    <title>indextitle>

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

    

        <include file="common/header"/>

    





    

    <div class="main">

        <div class="article-list">

            <div class="container title">

                <h5>注册香港公司相关资料h5>

                

            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="" title="" target="_blank">了解更多>>a>
                        dd>

                    dl>

                foreach>

            div>

        div>





        

            <include file="common/footer"/>

        

    div>

    



    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>

你可能感兴趣的:(web前端,javascript)