图片懒加载实现

最新推荐文章于 2023-07-29 22:03:12 发布
村头一颗草
最新推荐文章于 2023-07-29 22:03:12 发布
阅读量128
点赞数
本文链接：https://blog.csdn.net/qq_41820986/article/details/115567045
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天美</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/home.css">
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="/static/css/front_index.css">
    <style>
        .layui-tab-title .layui-this:after {
            margin-top: 30px;
        }
    </style>
</head>
<!--font-family: regular-->
<body style="background-color: #f5f5f5;font:12px/1 Tahoma,Helvetica,Arial,'微软雅黑',sans-serif;">
<div class="layui-row">
    <div class="layui-col-xs12">
        <div class="layui-col-xs12"
             style="height:120px;background-color:whitesmoke;margin: 0 auto;position: fixed;z-index: 3">
            <div class="layui-col-xs2">
                <li class="layui-icon layui-icon-search"
                    style="width:100px;font-size: 80px;margin-left: 50px;margin-top: 20px"></li>
            </div>
            <div class="layui-col-xs10" style="margin-top: 20px">
                <input id="search_data"
                       style="width: 70%;border-radius: 20px;outline: none; height: 80px;font-size: 40px;float: left"
                       type="text"
                       name="title" autocomplete="off" placeholder="输入搜索内容" class="layui-input">
                <button onclick="search()" type="button" class="layui-btn layui-btn-warm layui-btn-radius"
                        style="width:180px;height:80px;margin-left:20px;font-size:40px;float: left">搜索
                </button>
            </div>
        </div>

        <div class="layui-col-xs12" style="margin-top: 140px">
            <div class="layui-carousel layui-form-text " id="lunbotu">
                <div carousel-item="">
                    {volist name="data" id="vo"}
                    <div><img src="{$vo.imgurl}" style="width:100%;height: 400px"/></div>
                    {/volist}
                </div>
            </div>
        </div>
        <hr class="layui-bg-green">
        <div class="layui-col-xs12" style="margin-top: 2%;background-color: white;padding: 20px">
            {volist name="menudata" id="vo"}
            <div onclick="nav('{$vo.label}')" id="nav{$vo.id}" class="layui-col-xs3" style="margin-top: 10px;">
                <div>
                    <img src="{$vo.imgurl}" style="display:block;width: 140px;height: 140px;margin: 0 auto;
                box-shadow: 0 0 10px black;border-radius: 50%;"/>
                    <div style="font-family: '黑体';text-align: center;font-size: 40px;margin:10px auto">
                        {$vo.label}
                    </div>
                </div>
            </div>
            {/volist}
        </div>
        <!--        热销商品-->
        <div class="layui-col-xs12" style="background-color: white;margin: 20px auto;padding: 20px">
            <label style="margin-left: 20px;font-size: 40px;border-left: 12px solid orange;padding-left: 10px;">
                热销商品
            </label>
            <div class="layui-col-xs12">
                <div id="rx_shop" class="rx_shop">
                    <!--                    异步参数加载图片-->
                </div>
            </div>
        </div>

        <!--        猜你喜欢-->
        <label id="tjsp" style="margin-left: 20px;margin-bottom:10px;font-size: 40px;border-left: 12px solid orange;padding-left: 10px;">
            推荐商品
        </label>
        <div class="layui-bg-gray layui-col-xs12" style="margin-top: 50px">
            <div class="layui-tab layui-tab-brief">
                <ul id="tab_par" class="layui-tab-title"
                    style="height:70px;background-color:white;padding-bottom:10px;display: flex;justify-content: space-around;margin-bottom: 10px;margin: 2px auto">
                    <li onclick="tabclick(this)" class="layui-this"
                        style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">全部
                    </li>
                    <li onclick="tabclick(this)"
                        style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">服装
                    </li>
                    <li onclick="tabclick(this)"
                        style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">美妆
                    </li>
                    <li onclick="tabclick(this)"
                        style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">家电
                    </li>
                    <li onclick="tabclick(this)"
                        style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">运动
                    </li>
                </ul>
                <ul id="tab_mu" class="layui-tab-title"
                    style="height:70px;background-color:white;padding-bottom:10px;display: flex;justify-content: space-around;margin: 2px auto">
                    <li onclick="tabclick(this)" class="layui-this"
                        style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;vertical-align: middle;">
                        综合
                    </li>
                    <li onclick="tabclick(this)"
                        style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">生鲜
                    </li>
                    <li onclick="tabclick(this)"
                        style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">食品
                    </li>
                    <li onclick="tabclick(this)"
                        style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">车饰
                    </li>
                    <li onclick="tabclick(this)"
                        style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">券后价
                    </li>
                </ul>
                <!--                <div class="layui-tab-content">-->
                <!--                    <div class="layui-tab-item layui-show">-->
                <!--                    </div>-->
                <!--                    <div class="layui-tab-item">内容2</div>-->
                <!--                    <div class="layui-tab-item">内容3</div>-->
                <!--                    <div class="layui-tab-item">内容4</div>-->
                <!--                    <div class="layui-tab-item">内容5</div>-->
                <!--                </div>-->
            </div>

            <div id="like_shop">
                <!--                js异步数据-->
            </div>
        </div>
    </div>
    <div class="layui-col-xs12" style="height: 250px">
        <div class="bottom" id="load_bo">
            <img src="/static/image/load.gif">
            <p>商品正在来的路上~</p>
        </div>
    </div>
    <div id="temlet" class="tm_tab">
    </div>
</div>
<script>
    layui.use(['form', 'carousel', 'upload', 'jquery', 'layer', 'element'], function () {
        var form = layui.form;
        var carousel = layui.carousel;
        var upload = layui.upload;
        var layer = layui.layer;
        var $ = layui.$;
        var element = layui.element;

        var text_e = "全部";
        var counts = 1;
        var imgs = "";
        //底部导航模板
        $("#temlet").load('{:url("wxapi/temlet")}');
        //轮播图
        carousel.render({
            elem: '#lunbotu'
            , width: '100%' //设置容器宽度
            , height: '400px'
            , arrow: 'none' //始终显示箭头

            //,anim: 'updown' //切换动画方式
        });

        nav = function (e) {
            window.location.href = "{:url('model')}?label=" + e;
            console.log(e)
        };
        //请求数据加载动画
        var loading = layer.load(0, {
            shade: false
            , size: 200
            , time: 10 * 1000

        });
        $.ajax({
            url: '{:url("lmtg")}'
            , type: 'post'
            , dataType: 'json'
            , success: function (e) {
                e.forEach(function (value, key, ar) {
                    $('#rx_shop').append('<div οnclick="url(\'' + ar[key]["destUrl"] + '\')" class="rx_shop_item">' +
                        '<img src=' + ar[key]["goodsThumbUrl"] + '>' +
                        '<br><label>￥' + ar[key]["vipPrice"] + '</label><s>￥' + ar[key]["marketPrice"] + '</s>' +
                        '</div>')
                })
                layer.close(loading)
            }
            , error: function (res) {
                console.log(res)
            }
        })
        url = function (e) {
            console.log(e)
            window.location.href = e;
        }
        window.onload=function (){
            var e;
            tabclick();
        }


        //tab事件
        tabclick = function (e, d, cot,tmcount) {
            // var ta = document.getElementById('tab_par').getElementsByTagName('li')
            // var tb = document.getElementById('tab_mu').getElementsByTagName('li')
            // for (var i = 0; i < ta.length; i++) {
            //     console.log(ta[i].getAttribute('class'))
            // }
            var text
            //判断是否是搜索
            if (d == 1) {
                text = e
                console.log(text)
            } else {
               if (e == "") {
                    text = text_e
                } else {
                    text = e.innerHTML||e
                    if(text_e != text){
                        counts=1
                    }
                    text_e = text
                }
            }
            console.log('page' + counts)
            //推荐商品
            $.ajax({
                url: '{:url("xhshop")}'
                , type: 'post'
                , data: {'data': text, 'page': counts}
                , dataType: 'json'
                , success: function (e) {
                    if (e.length == 0) {
                        layer.msg('<span style="font-size:30px">暂无该商品!</span>', {icon: 3})
                        return false;
                    }
                    console.log(e)
                    //判断是否滚动事件
                    if(tmcount !='tmcount'){
                        $('#like_shop').empty()
                    }
                    e.forEach(function (value, key, ar) {
                        $('#like_shop').append('<div οnclick="like(\'' + ar[key]["goodsId"] + '\')"  class="layui-col-xs12"> <div class="layui-col-xs5" style="margin-bottom: 20px">\n' +
                            '                    <div class="like_left">\n' +
                            '                        <img src="/static/image/load1.gif" data-src="' + ar[key]["goodsThumbUrl"] + '"/>\n' +
                            '                    </div>\n' +
                            '                </div>\n' +
                            '                <div class="layui-col-xs7" style="margin-bottom: 20px">\n' +
                            '                    <div style="padding-right: 10px">\n' +
                            '                        <span class="layui-badge" style="font-size: 35px;height: 35px;padding-top: 10px">' + ar[key]["storeName"] + '</span>\n' +
                            '                        <label style="font-size: 40px;line-height: 60px;color: black;">' + ar[key]["goodsName"] + '</label>\n' +
                            '                        <div style="margin-top: 2%">\n' +
                            '                            <label style="font-size: 30px; color: #FD482C;font-weight: bold;">唯品价￥\n' +
                            '                                <label style="font-size: 50px"> ' + ar[key]["vipPrice"] + '</label>\n' +
                            '                            </label>\n' +
                            '                            <s style="margin-left: 20px;font-size: 30px;">市场价￥' + ar[key]["marketPrice"] + '</s>\n' +
                            '                        </div>\n' +
                            '                        <div class="zhekou">折扣:' + ar[key]["discount"] + '</div>\n' +
                            '                    </div>\n' +
                            '                </div></div>')
                    })
                    layer.close(loading)
                    imgs = document.getElementById('like_shop').getElementsByTagName('img')
                    lazyload(imgs);


                }
                , error: function (res) {
                    console.log(res)
                    $('#load_bo').empty()
                    $('#load_bo').append('<p>暂无更多商品</p>')
                }

            })
        }

        //列表进入内页
        like = function (e) {
            console.log(e)
            window.location.href = '{:url("neiye")}?id='+e;
        }

        //搜索事件
        search = function () {
            var data = document.getElementById('search_data').value
            tabclick(data, 1)
            $('body,html').animate({
                    scrollTop: $("#tjsp").offset().top-150
                },
                500
            );
        }

        // 获取到浏览器顶部的距离
        function getTop(e) {
            var T = e.offsetTop;
            while (e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function countad(){
            return counts++;
        }
        // 懒加载实现
        function lazyload(imgs) {
            // 可视区域高度
            var e="", d;
            var h = window.innerHeight;
            //滚动区域高度
            var s = document.documentElement.scrollTop || document.body.scrollTop;

            //加载更多
            if ((h + s) == document.documentElement.scrollHeight) {
                this.tabclick(e, d, countad(),tm='tmcount')
            }
            for (var i = 0; i < imgs.length; i++) {
                //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
                if ((h + s) > getTop(imgs[i])) {
                    // 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
                    (function (i) {
                        setTimeout(function () {
                            // 不加立即执行函数i会等于9
                            // 隐形加载图片或其他资源，
                            //创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
                            var temp = new Image();
                            temp.src = imgs[i].getAttribute('data-src');//只会请求一次
                            // onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
                            temp.onload = function () {
                                // 获取自定义属性data-src，用真图片替换假图片
                                imgs[i].src = imgs[i].getAttribute('data-src')
                            }
                        }, 1)
                    })(i)
                }
            }
        }

        // 滚屏函数
        window.onscroll = function () {
            lazyload(imgs);
        }


    })

</script>
</body>
</html>
村头一颗草
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>天美</title> <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"> <link rel="stylesheet" href="/static/home.c
复制链接

扫一扫