懒加载

如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现

 function isVisible($node) {
       var winHeight = $(window).height();
       var scrHeight = $(window).scrollTop();
       if ($node.offset().top > scrHeight && $node.offset().top < (scrHeight + winHeight)){
           console.log("在可视范围内");
       }
   }

当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

 function isVisible($node) {
       var winHeight = $(window).height();
       var scrHeight = $(window).scrollTop();
       if ($node.offset().top > scrHeight && $node.offset().top < (scrHeight + winHeight)){
           console.log("ture");
       }
   }
 $(window).on("scroll",function(){
       isVisible($(node));
   });

当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现

 function isVisible($node) {
       var winHeight = $(window).height();
       var scrHeight = $(window).scrollTop();
       if ($node.offset().top > scrHeight && $node.offset().top < (scrHeight + winHeight)){
           if ($node.data('loaded') !== 1){
               $node.data('loaded',1);
               console.log("ture");
           }
       }
   }
   $(window).on("scroll",function(){
       isVisible($node);
   });

图片懒加载的原理是什么?

懒加载的原理就是先判定元素是否在浏览器窗口可视范围内,如果不在可视范围内则不进行http请求,如果在可视范围内并且没有加载过,则进行http请求(将事先写在标签中的自定义属性“data-src”的值赋给元素所在标签的src属性。)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible...
    GarenWang阅读 3,443评论 0 2
  • 1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible...
    Rising_suns阅读 2,454评论 0 0
  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现...
    _Dot912阅读 5,613评论 10 8
  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现...
    饥人谷_全阅读 2,571评论 0 0
  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现...
    coolheadedY阅读 3,068评论 0 0