jq实现图片懒加载

最新推荐文章于 2023-02-21 10:09:32 发布

web网页设计与制作

最新推荐文章于 2023-02-21 10:09:32 发布

阅读量354

点赞数

分类专栏：前端文章标签： html js

本文链接：https://blog.csdn.net/wudan_11/article/details/110432548

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<body>

//src用一个小图片 data-src存入一个真实图片路径

<img src="../img/p.jpg" data-src="../img/index.gif">

</body>

<script type="text/javascript">
       lazyRender();//先检查一进来的页面有没有img标签
       var clock;//定义一个时间计时事件
       $(window).on('scroll',function(){
           //如果计时事件存在则清除
           if(clock){
               clearTimeout(clock)
           }
           //给计时事件重新赋值
           clock = setTimeout(function(){
               lazyRender()
           },300)
       })
       function lazyRender(){
           $("body img").each(function(){
               if(checkShow(this) && !isLoaded(this)){
                   lazyLoad(this);
               }
           })
       }
       //检查元素是否出现在可视区域内
       function checkShow(_this){
           var height = $(window).height();//浏览器可视区域高度
           var scrollHeight = $(document).scrollTop();//滚动条距离顶部距离
           var elemHeight = $(_this).offset().top;//元素距离顶部的距离

           if(elemHeight - scrollHeight <height) {
               return true;
           }
           return false;
       }
       //检查元素是否已经被加载过
       function isLoaded(_this){
           return $(_this).attr('src') == $(_this).data('src');
       }
       //加载真实图片
       function lazyLoad(_this){
           $(_this).attr('src',$(_this).data('src'));
       }
   </script>