使用jquery实现的按需加载

来源：互联网发布：淘宝店铺一颗心编辑：程序博客网时间：2024/06/05 19:06

图片的延迟加载最常见的是只加载网页显示在屏幕中的图片，如果用户没有滚动到网页靠下的部分，那图片就不用显示了，节省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>

0 0