PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 0409作业-懒加载及轮播图

0409作业-懒加载及轮播图

千山暮雪
千山暮雪 原创
2021年04月12日 16:37:59 527浏览

懒加载原理及实现

1.懒加载原理

一张图片就是一个<img>标签,浏览器发起图片请求,请求是根据<img>的src属性加载图片,所以实现懒加载的关键就是,在图片没有进入可视区域时,先不给<img>的src赋值,这样浏览器就加载不到图片了,等到图片进入可视区域再给src赋值。

2.懒加载思路及实现

实现懒加载有四个步骤,如下:
1.加载loading定位图片
2.判断哪些图片要加载【重点】
3.隐形加载图片
4.替换真图片
懒加载原理
视口高度:document.documentElement.clientHeight
当前元素相对于其 offsetParent 元素的顶部的距离:HTMLElement.offsetTop
滚动条移动高度:document.documentElement.scrollTop
如上图所示,当图片距离顶部的距离offsetTop等于可视区域clientHeight和滚动区域高度scrollTop之和时说明图片马上就要进入可视区了,就是说当offsetTop<=clientHeight + scrollTop时,图片在可视区。

示例
懒加载

  • css
  1. <style>
  2. .container {
  3. width: 500px;
  4. display: grid;
  5. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  6. }
  7. .container img {
  8. width: 100%;
  9. }
  10. </style>
  • html
  1. <div class="container">
  2. <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg">
  3. <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg">
  4. <img src="images/temp.jpg" alt="" data-src="images/img-3.jpg">
  5. <img src="images/temp.jpg" alt="" data-src="images/img-4.jpg">
  6. <img src="images/temp.jpg" alt="" data-src="images/img-5.jpg">
  7. <img src="images/temp.jpg" alt="" data-src="images/img-6.jpg">
  8. <img src="images/temp.jpg" alt="" data-src="images/img-7.jpg">
  9. <img src="images/temp.jpg" alt="" data-src="images/img-8.jpg">
  10. <img src="images/temp.jpg" alt="" data-src="images/img-9.jpg">
  11. <img src="images/temp.jpg" alt="" data-src="images/img-10.jpg">
  12. <img src="images/temp.jpg" alt="" data-src="images/img-11.jpg">
  13. <img src="images/temp.jpg" alt="" data-src="images/img-12.jpg">
  14. <img src="images/temp.jpg" alt="" data-src="images/img-13.jpg">
  15. <img src="images/temp.jpg" alt="" data-src="images/img-14.jpg">
  16. <img src="images/temp.jpg" alt="" data-src="images/img-15.jpg">
  17. <img src="images/temp.jpg" alt="" data-src="images/img-16.jpg">
  18. <img src="images/temp.jpg" alt="" data-src="images/img-17.jpg">
  19. <img src="images/temp.jpg" alt="" data-src="images/img-18.jpg">
  20. <img src="images/temp.jpg" alt="" data-src="images/img-19.jpg">
  21. <img src="images/temp.jpg" alt="" data-src="images/img-20.jpg">
  22. <img src="images/temp.jpg" alt="" data-src="images/img-21.jpg">
  23. <img src="images/temp.jpg" alt="" data-src="images/img-22.jpg">
  24. <img src="images/temp.jpg" alt="" data-src="images/img-23.jpg">
  25. <img src="images/temp.jpg" alt="" data-src="images/img-24.jpg">
  26. <img src="images/temp.jpg" alt="" data-src="images/img-25.jpg">
  27. <img src="images/temp.jpg" alt="" data-src="images/img-26.jpg">
  28. <img src="images/temp.jpg" alt="" data-src="images/img-27.jpg">
  29. <img src="images/temp.jpg" alt="" data-src="images/img-28.jpg">
  30. <img src="images/temp.jpg" alt="" data-src="images/img-29.jpg">
  31. <img src="images/temp.jpg" alt="" data-src="images/img-30.jpg">
  32. <img src="images/temp.jpg" alt="" data-src="images/img-31.jpg">
  33. <img src="images/temp.jpg" alt="" data-src="images/img-32.jpg">
  34. <img src="images/temp.jpg" alt="" data-src="images/img-33.jpg">
  35. <img src="images/temp.jpg" alt="" data-src="images/img-34.jpg">
  36. <img src="images/temp.jpg" alt="" data-src="images/img-35.jpg">
  37. <img src="images/temp.jpg" alt="" data-src="images/img-36.jpg">
  38. <img src="images/temp.jpg" alt="" data-src="images/img-37.jpg">
  39. <img src="images/temp.jpg" alt="" data-src="images/img-38.jpg">
  40. <img src="images/temp.jpg" alt="" data-src="images/img-39.jpg">
  41. <img src="images/temp.jpg" alt="" data-src="images/img-40.jpg">
  42. <img src="images/temp.jpg" alt="" data-src="images/img-41.jpg">
  43. <img src="images/temp.jpg" alt="" data-src="images/img-42.jpg">
  44. <img src="images/temp.jpg" alt="" data-src="images/img-43.jpg">
  45. <img src="images/temp.jpg" alt="" data-src="images/img-44.jpg">
  46. <img src="images/temp.jpg" alt="" data-src="images/img-45.jpg">
  47. <img src="images/temp.jpg" alt="" data-src="images/img-46.jpg">
  48. <img src="images/temp.jpg" alt="" data-src="images/img-47.jpg">
  49. <img src="images/temp.jpg" alt="" data-src="images/img-48.jpg">
  50. <img src="images/temp.jpg" alt="" data-src="images/img-49.jpg">
  51. <img src="images/temp.jpg" alt="" data-src="images/img-50.jpg">
  52. <img src="images/temp.jpg" alt="" data-src="images/img-51.jpg">
  53. <img src="images/temp.jpg" alt="" data-src="images/img-52.jpg">
  54. <img src="images/temp.jpg" alt="" data-src="images/img-53.jpg">
  55. <img src="images/temp.jpg" alt="" data-src="images/img-54.jpg">
  56. <img src="images/temp.jpg" alt="" data-src="images/img-55.jpg">
  57. <img src="images/temp.jpg" alt="" data-src="images/img-56.jpg">
  58. <img src="images/temp.jpg" alt="" data-src="images/img-57.jpg">
  59. <img src="images/temp.jpg" alt="" data-src="images/img-58.jpg">
  60. <img src="images/temp.jpg" alt="" data-src="images/img-59.jpg">
  61. <img src="images/temp.jpg" alt="" data-src="images/img-60.jpg">
  62. <img src="images/temp.jpg" alt="" data-src="images/img-61.jpg">
  63. <img src="images/temp.jpg" alt="" data-src="images/img-62.jpg">
  64. <img src="images/temp.jpg" alt="" data-src="images/img-63.jpg">
  65. <img src="images/temp.jpg" alt="" data-src="images/img-64.jpg">
  66. <img src="images/temp.jpg" alt="" data-src="images/img-65.jpg">
  67. <img src="images/temp.jpg" alt="" data-src="images/img-66.jpg">
  68. <img src="images/temp.jpg" alt="" data-src="images/img-67.jpg">
  69. <img src="images/temp.jpg" alt="" data-src="images/img-68.jpg">
  70. <img src="images/temp.jpg" alt="" data-src="images/img-69.jpg">
  71. <img src="images/temp.jpg" alt="" data-src="images/img-70.jpg">
  72. </div>
  • js
  1. // 所有图片
  2. const imgs = document.querySelectorAll('.container > img');
  3. // 图片加载函数
  4. function imgLoad() {
  5. // 视口高度
  6. let viewHeight = document.documentElement.clientHeight;
  7. // 滚动距离
  8. let scrollTop = document.documentElement.scrollTop;
  9. imgs.forEach((img) => {
  10. // 判断是否进入视口
  11. if (img.offsetTop <= viewHeight + scrollTop) {
  12. setTimeout(() => {
  13. img.src = img.dataset.src;
  14. }, 500);
  15. }
  16. });
  17. }
  18. // 加载时
  19. window.addEventListener('load', imgLoad);
  20. // 滚动条
  21. window.addEventListener('scroll', imgLoad);
  22. // 视口变化时
  23. window.addEventListener('resize', imgLoad);

轮播图

  • css
  1. /* 初始化 */
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. a {
  8. text-decoration: none;
  9. }
  10. /* 轮播图的容器 */
  11. .container {
  12. width: 62.5em;
  13. height: 22em;
  14. margin: 1em auto;
  15. /* 转为定位元素/定位父级 */
  16. position: relative;
  17. }
  18. /* 图片组 */
  19. .container > .imgs img {
  20. width: 100%;
  21. height: 100%;
  22. /* 默认全部隐藏 */
  23. display: none;
  24. /* 将所有的图片进行绝对定位,确保每一次只看到一张,所有图片共享这个容器 */
  25. position: absolute;
  26. left: 0;
  27. top: 0;
  28. }
  29. /* 设置默认显示的图片(第一张) */
  30. .container > .imgs img.active {
  31. display: block;
  32. }
  33. /* 按钮组(独立按钮) */
  34. .container > .btns {
  35. position: absolute;
  36. left: 0;
  37. right: 0;
  38. bottom: 0;
  39. /* 水平居中 */
  40. text-align: center;
  41. }
  42. .container > .btns a {
  43. /* 转成行内块元素: 即能水平排列,双支持宽度设置 */
  44. display: inline-block;
  45. padding: 0.5em;
  46. margin: 0 0.2em;
  47. background-color: #fff;
  48. border-radius: 50%;
  49. }
  50. .container > .btns a.active {
  51. background-color: #000;
  52. }
  53. /* 翻页按钮 */
  54. .container .skip a {
  55. position: absolute;
  56. width: 2.5rem;
  57. height: 5rem;
  58. line-height: 5rem;
  59. text-align: center;
  60. opacity: 0.3;
  61. top: 9rem;
  62. font-weight: lighter;
  63. font-size: 2rem;
  64. background-color: #ccc;
  65. }
  66. .container .skip .prev {
  67. left: 0;
  68. }
  69. .container .skip .next {
  70. right: 0;
  71. }
  72. .container .skip *:hover {
  73. opacity: 0.6;
  74. color: #666;
  75. }
  • html
  1. <div class="container">
  2. <!-- 1. 图片组 -->
  3. <nav class="imgs">
  4. <a href="#"><img src="banner/banner1.jpg" alt="" data-index="1" class="active" /></a>
  5. <a href="#"><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
  6. <a href="#"><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
  7. <a href="#"><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
  8. </nav>
  9. <!-- 2. 图片中下部的小按钮 -->
  10. <nav class="btns">
  11. </nav>
  12. <!-- 3. 翻页 -->
  13. <nav class="skip">
  14. <a href="#" class="prev">&lt;</a>
  15. <a href="#" class="next">&gt;</a>
  16. </nav>
  17. </div>
  • javascript
  1. // 获得元素
  2. const imgs = document.querySelectorAll('.container >.imgs img');
  3. const btnGroup = document.querySelector('.container > .btns');
  4. const skips = document.querySelector('.container > .skip');
  5. // 创建小按钮的函数
  6. function createBtns(ele,imgLength) {
  7. // 临时父类
  8. let tempBtns = document.createDocumentFragment();
  9. for (let i = 0; i < imgLength; i++) {
  10. let a = document.createElement('a');
  11. a.href = '#';
  12. a.dataset.index = `${i + 1}`;
  13. if ( i === 0) {
  14. a.classList.add('active');
  15. }
  16. tempBtns.append(a);
  17. }
  18. ele.append(tempBtns);
  19. }
  20. // 创建按钮
  21. createBtns(btnGroup,imgs.length);
  22. const btns = document.querySelectorAll('.container > .btns > *');
  23. // 获得activeEle
  24. function getActiveEle(eles) {
  25. let activeEle = [...eles].filter((ele)=>ele.classList.contains('active'));
  26. return activeEle[0];
  27. }
  28. // 设置active元素
  29. function setActiveEle(Index) {
  30. [imgs,btns].forEach((items) =>{
  31. getActiveEle(items).classList.remove('active');
  32. items.forEach((item)=>{
  33. if (item.dataset.index == Index) {
  34. item.classList.add('active');
  35. }
  36. });
  37. });
  38. }
  39. // 小按钮点击事件
  40. btns.forEach((item)=>{item.addEventListener('click',(ev)=>{setActiveEle(ev.target.dataset.index)})});
  41. // 获得当前active元素index
  42. let currentEleIndex = getActiveEle(imgs).dataset.index;
  43. // 上页 下页
  44. skips.querySelector('.next').addEventListener('click', nextEle);
  45. skips.querySelector('.prev').addEventListener('click', prevEle);
  46. // 下页函数
  47. function nextEle(ev) {
  48. if ( ++currentEleIndex > imgs.length) {
  49. currentEleIndex = imgs[0].dataset.index;
  50. }
  51. setActiveEle(currentEleIndex);
  52. }
  53. // 上页函数
  54. function prevEle(ev){
  55. if ( --currentEleIndex < imgs[0].dataset.index) {
  56. currentEleIndex = imgs[imgs.length - 1].dataset.index;
  57. }
  58. setActiveEle(currentEleIndex);
  59. }
  60. // 轮播
  61. const container = document.querySelector('.container');
  62. container.addEventListener('mouseover', stopRun, false);
  63. container.addEventListener('mouseout', startRun, false);
  64. container.addEventListener('run', nextEle);
  65. // 定时器
  66. let timer = [];
  67. const evt = new Event('run');
  68. function startRun(ev) {
  69. timer = setInterval('container.dispatchEvent(evt)',2000);
  70. }
  71. function stopRun(ev) {
  72. clearInterval(timer);
  73. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议