getBoundingClientRect实现懒加载

getBoundingClientRect这个API的兼容性非常好

http://caniuse.com/#search=getBoundingClientRect

该API可以获取元素相对于当前屏幕左上角的距离，所以可以判断当前元素是否在屏幕内，很方便的实现懒加载

具体demo如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul,li {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        img {
            width: 200px;
            height: 200px;
            border: 1px solid lightgrey;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
        <li><img src="" alt="" data-src="http://hdn.xnimg.cn/photos/hdn421/20170121/0000/h_main_D0cG_b0dc00061386195a.jpg"></li>
    </ul>
    <script>
        //绑定事件
        function bindEvent() {
            document.addEventListener('scroll',lazyLoad,false)
        }

        //判断当前元素是否在视窗内
        function ifIntoView(dom) {
            var info = dom.getBoundingClientRect(),
                clienHeight = window.innerHeight;
            if (0 < info.top && info.top < clienHeight) {
                showImg(dom);
            }

        }

        //显示图片
        function showImg(dom) {
            //延时是为了展示懒加载效果
            setTimeout(function() {
                dom.setAttribute('src', dom.dataset.src);
            }, 500)
        }

        function lazyLoad() {
            var selectorArray = Array.prototype.slice.call(document.querySelectorAll('img'));
            selectorArray.forEach(function(element, index) {
                if (!element.getAttribute('src')) {
                    ifIntoView(element);
                }
            })
        }

        bindEvent();
    </script>
</body>
</html>

 

posted @ 2017-03-01 12:45  cococe  阅读(273)  评论(0)  编辑  收藏  举报