专栏首页bamboo前端学习记录元素滚动高度和图片懒加载

元素滚动高度和图片懒加载

一、转载内容

首先转载两篇文章 JS中height、clientHeight、scrollHeight、offsetHeight区别 关于scrollTop,offsetTop,scrollLeft,offsetLeft用法介绍

二、clientHeight和offsetHeight

页面body的clientWidth和height是不加border的值,要包括padding的值

页面body的offsetWidth和height是加border的值,要包括padding的值

举个例子 在页面控制台输入document.body.clientHeight 和document.body.offsetHeight

发现两者数值相同,因为body没有加border。当我给body加上10px的border,clientHeight就少了20px

二、元素滚动高度

当一个元素的内容多,高度超出他所在的容器高度,会出现滚动条

1、element.scrollHeight 元素滚动内容的总长度

element.scrollHeight 元素滚动内容的总长度。如果元素没出现滚动条, scrollHeight等于 clientHeight

2、element.scrollTop 滚动的高度 元素滚动的距离

3、window.innerHeight 窗口的高度

三、图片懒加载

我只想写一点笔记,方便自己记忆,这篇文章干货较少。如果想学习懒加载的朋友,建议直接观看这篇文章实现图片懒加载(Lazyload),这篇文章写得很好,

懒加载主要是使用于图片比较多的情况,一次性加载所有的图片会给服务器比较大的压力,加载比较慢,所以我们先不加载未出现在页面可视区域内的图片,等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

懒加载主要有3个步骤: 1、把所有图片的src值换成另外一张图片的src值,把真正的src值放在data-src内 2、判断元素是否从下方出现在可区域,$(node).offset().top<=$(window).height() + $(window).scrollTop()

滚动时offset的值,offset().top为元素距离页面内容的高度

3、把图片data-src换成src值

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    .container:after{
      content: '';
      display: block;
      clear: both;
    }
    .container img {
      float: left;
      width: 50%;
    }
    h1{
      clear: both;
    } 
    /* 因为img都是浮动,如果不清除浮动,h1的值高度就相当于container里面最高的,不是实际的数值 */
      </style>
    </head>
    <body>
      <div class="container">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">
    <h1 id="target">hello</h1>
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="19" data-src="http://cdn.jirengu.com/book.jirengu.com/img/19.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="20" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg">
    
    
      </div>
      <script>
    start()
    /* 一开始没有滚动,也需要触发一次 */
    $(window).on('scroll', function(){
      start()
    })

    function start(){
      $('.container img').not('[data-isLoaded]').each(function(){
        var $node = $(this)
        if( isShow($node) ){
          loadImg($node)
         /* setTimeout(loadImg($node),300)可以不做函数节流,懒加载本来就是为了提高响应速度的 */
        }
      })
    }


    function isShow($node){
      return $node.offset().top <= $(window).height() + $(window).scrollTop()
    }

    function loadImg($img){
      $img.attr('src', $img.attr('data-src'))
      $img.attr('data-isLoaded', 1)
      /*用于区别图片是否被加载过,防止重新加载*/
    }

  </script>
</body>
</html>

执行结果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js-数据运算

    加法运算符是在运行时决定,到底是执行相加,还是执行连接。也就是说,运算子的不同,导致了不同的语法行为,这种现象称为“重载”(overload)

    bamboo
  • v­bind以及class与style的绑定-vue笔记4

    在数据绑定中,最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动 态绑定

    bamboo
  • jQuery DOM操作

    在目标对象前插入同级兄弟元素(不是头部,而是外面,和对象并列同级),参数和append类似

    bamboo
  • 【python opencv 计算机视觉零基础到实战】二、 opencv文件格式与摄像头读取

    在我们获取到图像后,可以获取到图像的大小、类型以及通道等信息;通道指的是RGB这三个颜色通道,一幅完整的图像是由单独的红色图像、单独的绿色图像以及单独的蓝色图像...

    公众号 碧油鸡
  • Openlayers 2.X加载天地图

    在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何在Openlayers 2.X的版本中加载天地图,并添加自己的wms服务。

    lzugis
  • 英特尔将收购芯片提供商eASIC,加快发展FPGA

    今天,英特尔宣布计划通过收购总部位于加利福尼亚州圣克拉拉的领先结构化ASIC供应商eASIC,将其可编程解决方案组合扩展到包括结构化ASIC。eASIC拥有19...

    AiTechYun
  • 都想逃离北上广,那么谁能告诉我去哪儿玩?

    作者:尧异,前36氪关注旅游行业的作者、分析师,现是苦逼创业狗一条,Travel-X联合创始人,y@travel-x.cn。

    华章科技
  • python学习笔记(6)——Python 直接赋值、浅拷贝和深度拷贝解析

    >>>a = {1: [1,2,3]} >>> b = a.copy() >>> a, b ({1: [1, 2, 3]}, {1: [1, 2, 3]}) >...

    my_sunshine
  • 2019-01-28 [日常]Beyon

    看了一个Beyond的纪录片, 于是搜集了24首歌词, 用Python做了简单分词和词频统计.

    py3study
  • Code Forces 644B Processing Queries

    B. Processing Queries time limit per test5 seconds memory limit per test256 ...

    ShenduCC

扫码关注云+社区

领取腾讯云代金券