懒加载

cqj0008

于 2017-12-17 14:48:34 发布

阅读量144

点赞数

分类专栏： jquery案例文章标签：懒加载

本文链接：https://blog.csdn.net/cqj0008/article/details/78825144

版权

jquery案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

懒加载
原理: 先把所有的图片的src设置多一个_src,(不显示);
封装一个函数,获取总高度(窗口高 + 滚动的高度),所有的图片each循环index下标,ele元素,
元素需要包装为jq对象,获取这个元素图片的绝对位置(offset().top);
再判断元素图片的绝对位置小于或等于窗口加滚动的高度,先获取图片的_src,再设置src;
前面先调用一次,在滚动或者窗口大小发生变化时调用

js部分:

    <script type="text/javascript" src="jq1.7.2/jquery.js"></script>
    <script type="text/javascript">
    $(function () {
        lazeLoad();
        $(window).scroll(lazeLoad);
        $(window).resize(lazeLoad);
        function lazeLoad() {
            // 右边线
            var result = $(window).height() + $(document).scrollTop();
            $('ul li img').each(function (index,ele) {
                // ele-->js对象-->jq对象
                var top = $(ele).offset().top;
                if (top <= result) {
                    // 加载图片
                    // ele.src = ele.getAttribute('_src');
                    var _src = $(ele).attr('_src');
                    $(ele).attr('src',_src);
                }
            });
        }


    })
    </script>

css部分:

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 50px;
            float: left;
        }
        li img {
            width: 100%;
            height: 100%;
        }
    </style>

html部分:

    <ul>
        <li><img _src="img/b1.jpg"></li>
        <li><img _src="img/b2.jpg"></li>
        <li><img _src="img/b3.jpg"></li>
        <li><img _src="img/b4.jpg"></li>
        <li><img _src="img/b5.jpg"></li>
        <li><img _src="img/b6.jpg"></li>
        <li><img _src="img/b7.jpg"></li>
        <li><img _src="img/b8.jpg"></li>
        <li><img _src="img/b9.jpg"></li>
        <li><img _src="img/b10.jpg"></li>
    </ul>