使用jquery实现的按需加载

时间：2021-11-28 19:23:25

图片的延迟加载最常见的是只加载网页显示在屏幕中的图片，如果用户没有滚动到网页靠下的部分，那图片就不用显示了，节省HTTP请求和带宽，同时提高首屏的加载速度，提高用户体验。不会的童鞋拿去研究研究

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按需加载</title>
    <style type="text/css">
        *{list-style:none;}
        li{width:300px;height:250px;border:solid 1px #333;padding:10px;margin-bottom:10px;}
    </style>
</head>
<body>
    <ul>
        <li><img srcImg="./sunli/1.jpg" src="" alt="" width="100%"></li>
        <li><img srcImg="./sunli/2.jpg" alt="" width="100%"></li>
        <li><img srcImg="./sunli/3.jpg" alt="" width="100%"></li>
        <li><img srcImg="./sunli/4.jpg" alt="" width="100%"></li>
        <li><img srcImg="./sunli/5.jpg" alt="" width="100%"></li>
        <li><img srcImg="./sunli/6.jpg" alt="" width="100%"></li>
    </ul>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(window).scroll(function(){
        $('li[isLoaded!=1]').each(function(){
            //如果存在当前isloaded属性 直接返回
            // if($(this).attr('isLoaded')) return;
            //页面的y轴滚动距离
            var sT = $(window).scrollTop();
            //页面可视区域的高度
            var CH = $(window).height();
            //获取当前元素距离文档顶部的偏移量
            var OT = $(this).offset().top;
            //如果图片即将要展现在屏幕上的话
            if(OT < sT + CH){
                //获取当前li中img的src属性值
                var src = $(this).find('img').attr('srcImg');
                //设置src属性
                $(this).find('img').attr('src',src);
                //加载完毕之后添加属性 做标识
                $(this).attr('isLoaded',1);
            }
        })
    })


    </script>
</body>
</html>


标签：

相关文章