懒加载

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

function isVisible($node){
    var windowHeight = $(window).height();
    var scrollHeight = $(window).scrollTop();
    var offsetHeight = $node.offset().top;
    if(offsetHeight > scrollHeight && offsetHeight < windowHeight + scrollHeight){
        return true
    }else{
        return false
    }
 }

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

function isVisible($node){
    var windowHeight = $(window).height();
    var scrollHeight = $(window).scrollTop();
    var offsetHeight = $node.offset().top;
    if(offsetHeight > scrollHeight && offsetHeight < windowHeight + scrollHeight){
        console.log('true')
    }
}
 

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

//判断是否加载过,node元素有个data-src的自定义属性,加载后会将src属性的值与之同步
    function isLoaded($node) {
      if($node.attr('src')===$node.attr('data-src')) {
        return true;
      }
      return false;
    }
//第一次出现时打印true
    function printVirginSymbol($node) {
      if (!isLoaded($node) && isVisible($node)) {//isVisible()为第一题中函数
        console.log(true); 
      }
    }

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

懒加载的实现原理是页面刷新的时候只请求在视图范围内的图片的资源,对于其他的图片等进入视图内之后再进行加载,这样做会减少http请求,提升页面的性能。
我们将图片src放入一个自定义属性中,判断一个元素是否出现在可视窗口中,当元素出现在可视窗口中再将这个自定义属性的值赋给图片的src。

5. 实现视频中的图片懒加载效果

http://js.jirengu.com/vobukunawa/2/edit

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

推荐阅读更多精彩内容

  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现...
    _Dot912阅读 1,712评论 10 8
  • 1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible...
    GarenWang阅读 515评论 0 2
  • 饥人谷_李栋 定义 图片懒加载 阶段实现 如何判断图片在可视范围 代码思路 封装 懒加载抽离 曝光去重 总结 一、...
    xingkong_s阅读 777评论 5 7
  • 1、懒加载 1.什么是懒加载? 懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路...
    xiaolizhenzhen阅读 70,519评论 18 160
  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现...
    饥人谷_全阅读 324评论 0 0