登录  /  注册
首页 > 博客列表 > 【JavaScript案例】视口高度，元素位置、滚动高度等位置属性详解及图片懒加载、轮播图案例实战（附源代码）
博主信息
博文 128
粉丝 9
评论 5
访问量 233423
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【JavaScript案例】视口高度，元素位置、滚动高度等位置属性详解及图片懒加载、轮播图案例实战（附源代码）
　一纸荒凉* Armani
原创
2503人浏览过

在实现图片懒加载案例之前，我们先来学习一下JavaScript视口宽高、元素位置、滚动高度、尺寸属性

一、window视图位置属性

1.1、window对象获取视口（浏览器窗口）宽高

  1. console.log(window.innerHeight) // 939
  2. console.log(window.innerWidth)  // 809
  3. console.log(window.outerHeight) // 1050 (包括菜单栏)
  4. console.log(window.outerWidth)  // 1680



属性名 描述
window.innerHeight 浏览器窗口可视区域高度
window.innerWidth 浏览器窗口可视区域宽度
window.outerHeight 浏览器窗口整个高度，包括窗口标题、工具栏、状态栏等
window.outerWidth 浏览器窗口整个宽度，包括侧边栏和调正窗口大小的边框

以下方式效果一样都是获取浏览器视口高度

  1. let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  2. let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

document.documentElement.clientHeight和document.body.clientHeight的区别：

  • document.documentElement.clientHeight：不包括整个文档的滚动条，但包括<html>元素的边框。
  • document.body.clientHeight：不包括整个文档的滚动条，也不包括<html>元素的边框，也不包括<body>的边框和滚动条。

1.3、window对象获取浏览器窗口在显示器中的位置

  • window.screenX 浏览器窗口在显示器中的水平位置
  • window.screenY 浏览器窗口在显示器中的垂直位置
  • window.screenLeft 浏览器可用空间左边距离屏幕（系统桌面）左边界的距离
  • window.screenTop 浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的距离

二、元素视图位置属性

关于元素大小位置等信息的一些属性有三个家族:

  • client家族：clientLeft、clientTop、clientWidth、clientHeight、height、width
  • offset家族：offsetLeft、offsetTop 、offsetWidth、offsetHeight、 offsetParent
  • scroll家族：scrollLeft、scrollTop、scrollWidth 、 scrollHeight

2.1、client家族介绍

clientWidth : 显示内容区域的宽度
clientHeight : 显示内容区域的高度

2.2、offset家族介绍

  1. <main style="position: relative" id="main">
  2.   <article>
  3.     <div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
  4.   </article>
  5. </main>
  6. <script>
  7.   alert(example.offsetParent.id); // main
  8.   alert(example.offsetLeft); // 180 
  9.   alert(example.offsetTop); // 180
  10. </script>

offsetLeft : 相对于父级非static定位元素的左偏距离
offsetTop : 相对于父级非static定位元素的上偏距离
offsetWidth ：整个元素的宽度（包括边框）
offsetHeight ：整个元素的高度（包括边框）
offsetParent ： 第一个祖定位元素

2.3、scroll家族介绍

document.documentElement.scrollTop 上边滚动高度
document.documentElement.scrollLeft 左侧滚动宽度
document.documentElement.scrollWidth 网页内容整体的宽度
document.documentElement.scrollHeight 网页内容整体的高度

总结：

  • 网页可见区域宽： document.body.clientWidth;
  • 网页可见区域高： document.body.clientHeight;
  • 网页可见区域宽： document.body.offsetWidth (包括边线的宽);
  • 网页可见区域高： document.body.offsetHeight (包括边线的宽);
  • 网页正文全文宽： document.body.scrollWidth;

  • 网页正文全文高： document.body.scrollHeight;

  • 网页滚动的高度距离： document.documentElement.scrollTop;

  • 网页滚动的左侧距离： document.documentElement.scrollLeft;

  • 网页正文部分上： window.screenTop; （正文距离屏幕上边距离）

  • 网页正文部分左： window.screenLeft;（正文距离屏幕左侧距离）
  • 屏幕分辨率的高： window.screen.height;
  • 屏幕分辨率的宽： window.screen.width;
  • 屏幕可用工作区高度： window.screen.availHeight;

文档坐标：HTML文档，一旦渲染完成，整个页面的大小是固定的
视口坐标：用户看到的文档部分，窗口显示的文档部分可视区域

文档与视口之间的关系：

  1. 文档小于或等于视口
    这是一屏就可以将整个文档显示出来，没有滚动条，例如百度首页
  2. 文档 大于 视口
    这是常有的，文档内容一屏显示不完，会出现滚动条，通过拖动滚动条从而来查看更多内容，即滚动查看整个文档内容。

视口高度：显示网页内容的区域，不包括菜单栏等

图片懒加载(Lazyload)

对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。

所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

案例思路：
将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名为data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

那么如何知道该图片是用户即将看到的呢，需要通过计算，获取图片距离顶部高度小于滚动的距离和浏览器视口高度，这标志着该图片已经显示在视口中了。

​通过计算来判断何时显示该图片

  1.         body {
  2.             background-image: url(https://dss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/skin/759.jpg?2);
  3.             background-repeat: no-repeat;
  4.             background-attachment: fixed;
  5.             background-size: cover;
  6.         }
  8.         .container {
  9.             width: 80%;
  10.             margin: 10px auto;
  11.             display: grid;
  12.             grid-template-columns: repeat(6, 1fr);
  13.             grid-template-rows: repeat(auto, 1fr);
  14.         }
  16.         .container img {
  17.             width: 100%;
  18.         }
  20.         .container img:nth-child(6n-2) {
  21.             grid-area: span 2 / span 2;
  22.         }
  1. <div class="container">
  2.         <img data-src="img/img-1.jpg" src="img/temp.jpg">
  3.         <img data-src="img/img-2.jpg" src="img/temp.jpg">
  4.         <img data-src="img/img-3.jpg" src="img/temp.jpg">
  5.         <img data-src="img/img-4.jpg" src="img/temp.jpg">
  6.         <img data-src="img/img-5.jpg" src="img/temp.jpg">
  7.         <img data-src="img/img-6.jpg" src="img/temp.jpg">
  8.         <img data-src="img/img-7.jpg" src="img/temp.jpg">
  9.         <img data-src="img/img-8.jpg" src="img/temp.jpg">
  10.         <img data-src="img/img-9.jpg" src="img/temp.jpg">
  11.         <img data-src="img/img-10.jpg" src="img/temp.jpg">
  12.         <img data-src="img/img-11.jpg" src="img/temp.jpg">
  13.         <img data-src="img/img-12.jpg" src="img/temp.jpg">
  14.         <img data-src="img/img-13.jpg" src="img/temp.jpg">
  15.         <img data-src="img/img-14.jpg" src="img/temp.jpg">
  16.         <img data-src="img/img-15.jpg" src="img/temp.jpg">
  17.         <img data-src="img/img-16.jpg" src="img/temp.jpg">
  18.     </div>
  1.         // 循环数据插入
  2.         function addDate() {
  3.             var oParent = document.querySelector(".container")
  4.             for (var i = 0; i < 10; i++) { //循环插入数据      
  5.                 var oImg = document.createElement('img');
  6.                 oImg.dataset.src = 'img/img-' + Math.round(Math.random() * (70 - 1) + 1) + ".jpg";
  7.                 oImg.src = "img/temp.jpg";
  8.                 oParent.appendChild(oImg);
  9.             }
  10.         }
  12.         // 判断滚动条是否到底部
  13.         function checkscrollside() {
  14.             //获取最后一个瀑布流块的高度：距离网页顶部(实现未滚到底就开始加载)
  15.             var lastBoxH = document.querySelector(".container img:last-child").offsetTop;
  16.             var scrollTop = document.documentElement.scrollTop; //获取滚动条卷走的高度
  17.             var documentH = document.documentElement.clientHeight; //显示页面文档的高
  18.             return (lastBoxH < scrollTop + documentH) ? true : false; //到达指定高度后 返回true
  19.         }
  21.         // 监听浏览器的滚动事件
  22.         window.addEventListener('scroll', layzyload);
  23.         //页面载入完毕加载可是区域内的图片
  24.         window.addEventListener('load', layzyload);
  26.         function layzyload() {
  27.             // 当最后一个图片距离顶部的距离小于滚动的距离和可视窗口的高度的时候，返回true
  28.             if (checkscrollside()) {
  29.                 addDate(); // 随机动态加载十张图片
  30.             }
  31.             // 获取所有图片
  32.             const imgs = document.images;
  33.             // 获取视口高度
  34.             const clientHeight = document.documentElement.clientHeight;
  35.             //获取滚动高度
  36.             let scrollTop = document.documentElement.scrollTop;
  37.             // 循环遍历每一个图片
  38.             [...imgs].forEach(img => {
  39.                 // 当前图片的顶部距离他的父级的高度，是否小于视口高度+滚动距离之和，也就是图片在屏幕中出现了
  40.                 if (img.offsetTop < clientHeight + scrollTop) {
  41.                     setTimeout(() => {
  42.                         img.src = img.dataset.src;
  43.                     }, 600)
  44.                 }
  45.             })
  46.         }

效果图：图片懒加载

浏览地址：http://easys.ltd/layzyload/

轮播图

基本实现功能：

  • 自动切换图片
  • 左右按钮控制滚动
  • 点击圆点切换图片
  • 鼠标悬停停止切换

功能实现思路：

  • 通过js生成和图片对于的小圆点
  • 获取当前激活的小圆点和图片元素
  • 给当前激活的元素添加类样式
  • 根据点击的小圆点索引更新图片
  • 给左右切换按钮添加事件
  • 通过函数获取当前激活的图片索引
  • 给索引进行加和减从而来设置前后切换
  • 通过三元运算符判断是否到达最后一个和第一个
  • 将处理好的索引传入激活函数中进行按钮和图片的激活
  • 自动切换，给右翻页按钮设置单击事件派发
  • 通过定时器进行间隔时间派发点击事件
  • 通过鼠标移入和移出时间进行定时器的删除与创建
  • 页面加载完成将创建定时器
  1.         * {
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }
  7.         a {
  8.             text-decoration: none;
  9.         }
  10.         /* 轮播图的容器 */
  12.         .container {
  13.             width: 62.5em;
  14.             height: 22em;
  15.             margin: 1em auto;
  16.             /* 转为定位元素/定位父级 */
  17.             position: relative;
  18.         }
  19.         /* 图片组 */
  21.         .container>.imgs img {
  22.             width: 100%;
  23.             height: 100%;
  24.             /* 默认全部隐藏 */
  25.             display: none;
  26.             /* 将所有的图片进行绝对定位，确保每一次只看到一张,所有图片共享这个容器 */
  27.             position: absolute;
  28.             left: 0;
  29.             top: 0;
  30.         }
  31.         /* 设置默认显示的图片(第一张) */
  33.         .container>.imgs img.active {
  34.             display: block;
  35.         }
  36.         /* 按钮组(独立按钮) */
  38.         .container>.btns {
  39.             position: absolute;
  40.             left: 0;
  41.             right: 0;
  42.             bottom: 0;
  43.             /* 水平居中 */
  44.             text-align: center;
  45.         }
  47.         .container>.btns span {
  48.             /* 转成行内块元素: 即能水平排列,双支持宽度设置 */
  49.             display: inline-block;
  50.             padding: 0.5em;
  51.             margin: 0 0.2em;
  52.             background-color: #fff;
  53.             border-radius: 50%;
  54.             cursor: pointer;
  55.         }
  57.         .container>.btns span.active {
  58.             background-color: #000;
  59.         }
  60.         /* 翻页按钮 */
  62.         .container .skip a {
  63.             position: absolute;
  64.             width: 2.5rem;
  65.             height: 5rem;
  66.             line-height: 5rem;
  67.             text-align: center;
  68.             opacity: 0.3;
  69.             top: 9rem;
  70.             font-weight: lighter;
  71.             font-size: 3rem;
  72.             background-color: #ccc;
  73.             display: none;
  74.         }
  76.         .container:hover .skip a {
  77.             display: inline-block;
  78.         }
  80.         .container .skip .prev {
  81.             left: 0;
  82.         }
  84.         .container .skip .next {
  85.             right: 0;
  86.         }
  88.         .container .skip *:hover {
  89.             opacity: 0.6;
  90.             color: #666;
  91.         }
  1.     <div class="container">
  2.         <!-- 图片组 -->
  3.         <nav class="imgs">
  4.             <a href="#"><img src="banner/banner1.jpg" data-index="1" alt="" class="active"></a>
  5.             <a href="#"><img src="banner/banner2.jpg" data-index="2" alt=""></a>
  6.             <a href="#"><img src="banner/banner3.jpg" data-index="3" alt=""></a>
  7.             <a href="#"><img src="banner/banner4.jpg" data-index="4" alt=""></a>
  8.         </nav>
  9.         <!-- 图片下面小圆点 -->
  10.         <nav class="btns">
  11.             <!-- 注意这里的小圆点需要js添加，是因为小圆点的数量是由图片张数决定的 -->
  12.             <!-- 
  13.             <span data-index="1"></span>
  14.             <span data-index="2"></span>
  15.             <span data-index="3"></span>
  16.             <span data-index="4"></span> -->
  17.         </nav>
  18.         <!-- 左右切换按钮 -->
  19.         <nav class="skip">
  20.             <a href="#" class="prev">&lt;</a>
  21.             <a href="#" class="next">&gt;</a>
  22.         </nav>
  23.     </div>
  1. // 所以轮播图片
  2.         const imgs = document.querySelectorAll(".container > .imgs img");
  3.         // 底部小圆点
  4.         const btnGroup = document.querySelector(".container > .btns");
  5.         // 翻页按钮
  6.         const skip = document.querySelector('.container > .skip');
  8.         // 因为小圆点的数量是由图片张数决定的，所以需要根据图片的数量动态创建
  9.         function autoCreateBtns(ele, imglength) {
  10.             // 创建文档片段
  11.             const fragment = document.createDocumentFragment();
  12.             for (var i = 1; i <= imglength; i++) {
  13.                 var span = document.createElement('span');
  14.                 // 添加自定义属性data-index和图片进行对应关联
  15.                 span.dataset.index = i;
  16.                 // 默认给第一个小圆点添加激活类
  17.                 i === 1 ? span.classList.add('active') : "";
  18.                 // 将新建的span挂载到文档片段中
  19.                 fragment.append(span);
  20.             }
  21.             // 将文档片段追加到小圆点父节点中
  22.             ele.append(fragment);
  23.         }
  24.         // 传入小圆点父节点，图片的个数
  25.         autoCreateBtns(btnGroup, imgs.length);
  27.         // 给所有小圆点添加点击事件，利用事件代理
  28.         btnGroup.addEventListener("click", function(ev) {
  29.             // 判断点击的是小圆点span
  30.             if (ev.target.tagName === "SPAN") {
  31.                 setActiveEle(ev.target.dataset.index);
  32.             }
  33.         })
  35.         // 给左右切换按钮添加点击事件
  36.         document.querySelectorAll(".skip > a").forEach(item => {
  37.             item.addEventListener("click", function(ev) {
  38.                 // 左翻页按钮
  39.                 if (ev.target.classList.contains('prev')) {
  40.                     // 获取当前激活按钮为其索引-1
  41.                     let index = +getActiveEle(imgs).dataset.index;
  42.                     // 判断是否在第一页
  43.                     index = (index == 1) ? imgs.length : index - 1;
  44.                     setActiveEle(index);
  45.                 }
  46.                 // 右翻页按钮
  47.                 if (ev.target.classList.contains('next')) {
  48.                     // 获取当前激活按钮为其索引+1
  49.                     let index = +getActiveEle(imgs).dataset.index;
  50.                     // 判断是否在最后一页
  51.                     index = (index == imgs.length) ? 1 : index + 1;
  52.                     setActiveEle(index);
  53.                 }
  54.             })
  55.         })
  57.         /*自动循环播放*/
  58.         var timer;
  60.         function play(speed) {
  61.             timer = setInterval(function() {
  62.                 // 利用事件派发dispatchEvent() 自动点击右翻页按钮
  63.                 const ev = new Event("click");
  64.                 skip.lastElementChild.dispatchEvent(ev);
  65.             }, speed)
  66.         }
  68.         // 鼠标移入停止播放
  69.         document.querySelector('.container').onmouseenter = function() {
  70.                 clearInterval(timer);
  71.             }
  72.             // 鼠标移除重新开始
  73.         document.querySelector('.container').onmouseleave = function() {
  74.             play(1500);
  75.         }
  77.         // 页面加载完成开始播放
  78.         window.onload = () => {play(1500)};
  81.         // 获取激活的元素
  82.         function getActiveEle(eles) {
  83.             // let activeEles = [...eles].filter(item => item.classList.contains('active'));
  84.             return [...eles].filter(item => item.classList.contains('active'))[0];
  85.         }
  87.         // 获取哪个图片被激活
  88.         // console.log(getActiveEle(imgs));
  89.         // 获取哪个按钮被激活
  90.         // console.log(getActiveEle(btnGroup.children))
  93.         // 设置激活的元素，根据按钮索引更新正在显示的图片
  94.         function setActiveEle(btnIndex) {
  95.             // 参数为当前正在点击的按钮索引
  96.             // 1. 先将之前激活样式去掉
  97.             // getActiveEle(imgs).classList.remove('active');
  98.             // getActiveEle(btnGroup.children).classList.remove('active');
  99.             // 2. 在根据当前小圆点的索引设置需要激活的小圆点和图片
  100.             [imgs, btnGroup.children].forEach(arr => {
  101.                 getActiveEle(arr).classList.remove('active');
  102.                 [...arr].forEach(item => {
  103.                     // 循环判断哪个索引和当前点击的小圆点索引一致
  104.                     if (item.dataset.index == btnIndex) {
  105.                         // 为其对应的索引小圆点和图片添加激活样式
  106.                         item.classList.add('active')
  107.                     }
  108.                 })
  109.             })
  110.         }

效果图：

浏览地址：http://easys.ltd/Carousel

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：这是第一单元,最棒的作业之一, 以后, 尽可能不用或少用var, 在一些高级智能编辑器中可能会直接警告或报错了
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录