任务29 懒加载和回到顶部

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

  • 首先,要知道三个高度之间的关系,
    窗口的高度可以通过$(window).height()获得,
    窗口滚动的高度可以通过$(window).scrollTop()获得,
    以及目标元素距离窗口顶部的高度距离,可以通过目标元素的$node.offset().top获得,
    当元素距离顶部的高度<窗口的高度+滚动的高度,它是可见的,反之,则不可见。
    function isVisible($node){
    var offset=$node.offset().top;
    var scrollTop=$(window).scrollTop();
    winH=$(window).height();
    if(offset>scrollTop+winH){
    alert('不在可视范围内')
    }else{
    alert('在可视范围内')
    }
    }

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

  $(window).on('scroll',function(){
      if(isVisible($node)){
            console.log('true')
          }
   })

    function isVisible($node){
        var offset=$node.offset().top;
        var scrollTop=$(window).scrollTop();
              winH=$(window).height();
        if(offset

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

  • 设置延迟函数延迟执行,并设置标志位,判断是否滚动,若在几秒内一直在滚动,就不执行,清处定时器的,反之,则不执行清除定时器
    var clock;
    $(window).on('scroll',function(){
    if(clock){
    clearTimeout(clock)
    }
    var clock=setTimeout(function(){
    if(isVisible($node)&&!isLoaded($node)){
    console.log('true')
    }
    },500)
    })

      function isVisible($node){
          var offset    =    $node.offset().top;
          var   scrollTop=$(window).scrollTop();
                  winH      =   $(window).height();
          if(offset

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

  • 一般来说一个网页上会有几百个张图片,一张大图要100K以上,如果一次性同时加载网页,向服务器发送请求,数据超过10M,这直接会导致服务器忙不过来,因为http协议是只要客户端发送请求-服务器就会响应,页面加载卡死,所以为了避免这种情况和性能优化,才出现了懒加载。
  • 懒加载的原理是将不在我们浏览器的可视窗口的图片不做加载,等到用户滚动到这些不在可视区域的图片时,再去加载它,这会大大优化浏览器的性能和用户体验
  • 懒加载的实现方法:在页面载入时,将页面中img标签的src指向同一张小图片或白图,这是为了避免某些浏览器当加载不出来图片时会出现X的丑陋情况,这样对于服务器来说只发送请求一次,在把真正的url地址放在一个自定义的data-src属性里,然后在获取页面的中的img标签,遍历img标签,并判断它的位置是否出现在窗口的可视区域内,如果出现在可视区域内那就把真实的url地址赋给src,让对应的img图片显示出现,同时我们还可以对已经加载过的图片img标签设置一个为 isLoaded 的属性,设置为true,这样在下次执行懒加载的时候就会判断是否已经加载过,这样会有效的过滤出已加载的图片,会大大的优化页面的加载速度和性能节省。

代码题

1.代码1
2.代码2
3.代码3
本地测试成功
4.原生JS的回到顶部效果
这是最近学习到了,比jquery感觉效果更好一点,加入定时器有了平滑的过渡到顶部,不会显得太突然。

你可能感兴趣的:(任务29 懒加载和回到顶部)