1. 1.懒加载原理
  2. 一张图片就是一个<img>标签，浏览器发起图片请求,请求是根据<img>的src属性加载图片，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就加载不到图片了，等到图片进入可视区域再给src赋值。
  4. 2.懒加载思路及实现
  5. 实现懒加载有四个步骤，如下：
  6. 1.加载loading定位图片
  7. 2.判断哪些图片要加载【重点】
  8. 3.隐形加载图片
  9. 4.替换真图片
  10. 懒加载原理
  11. 视口高度：document.documentElement.clientHeight
  12. 当前元素相对于其 offsetParent 元素的顶部的距离：HTMLElement.offsetTop
  13. 滚动条移动高度：document.documentElement.scrollTop
  14. 如上图所示，当图片距离顶部的距离offsetTop等于可视区域clientHeight和滚动区域高度scrollTop之和时说明图片马上就要进入可视区了，就是说当offsetTop<=clientHeight + scrollTop时，图片在可视区。
  16. 示例
  17. 懒加载
  19. css
  20. <style>
  21.     .container {
  22.         width: 500px;
  23.         display: grid;
  24.         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  25.     }
  26.     .container img {
  27.         width: 100%;
  28.     }
  29. </style>
  30. html
  31.     <div class="container">
  32.         <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg">
  33.         <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg">
  34.         <img src="images/temp.jpg" alt="" data-src="images/img-3.jpg">
  35.         <img src="images/temp.jpg" alt="" data-src="images/img-4.jpg">
  36.         <img src="images/temp.jpg" alt="" data-src="images/img-5.jpg">
  37.         <img src="images/temp.jpg" alt="" data-src="images/img-6.jpg">
  38.         <img src="images/temp.jpg" alt="" data-src="images/img-7.jpg">
  39.         <img src="images/temp.jpg" alt="" data-src="images/img-8.jpg">
  40.         <img src="images/temp.jpg" alt="" data-src="images/img-9.jpg">
  41.         <img src="images/temp.jpg" alt="" data-src="images/img-10.jpg">
  42.         <img src="images/temp.jpg" alt="" data-src="images/img-11.jpg">
  43.         <img src="images/temp.jpg" alt="" data-src="images/img-12.jpg">
  44.         <img src="images/temp.jpg" alt="" data-src="images/img-13.jpg">
  45.         <img src="images/temp.jpg" alt="" data-src="images/img-14.jpg">
  46.         <img src="images/temp.jpg" alt="" data-src="images/img-15.jpg">
  47.         <img src="images/temp.jpg" alt="" data-src="images/img-16.jpg">
  48.         <img src="images/temp.jpg" alt="" data-src="images/img-17.jpg">
  49.         <img src="images/temp.jpg" alt="" data-src="images/img-18.jpg">
  50.         <img src="images/temp.jpg" alt="" data-src="images/img-19.jpg">
  51.         <img src="images/temp.jpg" alt="" data-src="images/img-20.jpg">
  52.         <img src="images/temp.jpg" alt="" data-src="images/img-21.jpg">
  53.         <img src="images/temp.jpg" alt="" data-src="images/img-22.jpg">
  54.         <img src="images/temp.jpg" alt="" data-src="images/img-23.jpg">
  55.         <img src="images/temp.jpg" alt="" data-src="images/img-24.jpg">
  56.         <img src="images/temp.jpg" alt="" data-src="images/img-25.jpg">
  57.         <img src="images/temp.jpg" alt="" data-src="images/img-26.jpg">
  58.         <img src="images/temp.jpg" alt="" data-src="images/img-27.jpg">
  59.         <img src="images/temp.jpg" alt="" data-src="images/img-28.jpg">
  60.         <img src="images/temp.jpg" alt="" data-src="images/img-29.jpg">
  61.         <img src="images/temp.jpg" alt="" data-src="images/img-30.jpg">
  62.         <img src="images/temp.jpg" alt="" data-src="images/img-31.jpg">
  63.         <img src="images/temp.jpg" alt="" data-src="images/img-32.jpg">
  64.         <img src="images/temp.jpg" alt="" data-src="images/img-33.jpg">
  65.         <img src="images/temp.jpg" alt="" data-src="images/img-34.jpg">
  66.         <img src="images/temp.jpg" alt="" data-src="images/img-35.jpg">
  67.         <img src="images/temp.jpg" alt="" data-src="images/img-36.jpg">
  68.         <img src="images/temp.jpg" alt="" data-src="images/img-37.jpg">
  69.         <img src="images/temp.jpg" alt="" data-src="images/img-38.jpg">
  70.         <img src="images/temp.jpg" alt="" data-src="images/img-39.jpg">
  71.         <img src="images/temp.jpg" alt="" data-src="images/img-40.jpg">
  72.         <img src="images/temp.jpg" alt="" data-src="images/img-41.jpg">
  73.         <img src="images/temp.jpg" alt="" data-src="images/img-42.jpg">
  74.         <img src="images/temp.jpg" alt="" data-src="images/img-43.jpg">
  75.         <img src="images/temp.jpg" alt="" data-src="images/img-44.jpg">
  76.         <img src="images/temp.jpg" alt="" data-src="images/img-45.jpg">
  77.         <img src="images/temp.jpg" alt="" data-src="images/img-46.jpg">
  78.         <img src="images/temp.jpg" alt="" data-src="images/img-47.jpg">
  79.         <img src="images/temp.jpg" alt="" data-src="images/img-48.jpg">
  80.         <img src="images/temp.jpg" alt="" data-src="images/img-49.jpg">
  81.         <img src="images/temp.jpg" alt="" data-src="images/img-50.jpg">
  82.         <img src="images/temp.jpg" alt="" data-src="images/img-51.jpg">
  83.         <img src="images/temp.jpg" alt="" data-src="images/img-52.jpg">
  84.         <img src="images/temp.jpg" alt="" data-src="images/img-53.jpg">
  85.         <img src="images/temp.jpg" alt="" data-src="images/img-54.jpg">
  86.         <img src="images/temp.jpg" alt="" data-src="images/img-55.jpg">
  87.         <img src="images/temp.jpg" alt="" data-src="images/img-56.jpg">
  88.         <img src="images/temp.jpg" alt="" data-src="images/img-57.jpg">
  89.         <img src="images/temp.jpg" alt="" data-src="images/img-58.jpg">
  90.         <img src="images/temp.jpg" alt="" data-src="images/img-59.jpg">
  91.         <img src="images/temp.jpg" alt="" data-src="images/img-60.jpg">
  92.         <img src="images/temp.jpg" alt="" data-src="images/img-61.jpg">
  93.         <img src="images/temp.jpg" alt="" data-src="images/img-62.jpg">
  94.         <img src="images/temp.jpg" alt="" data-src="images/img-63.jpg">
  95.         <img src="images/temp.jpg" alt="" data-src="images/img-64.jpg">
  96.         <img src="images/temp.jpg" alt="" data-src="images/img-65.jpg">
  97.         <img src="images/temp.jpg" alt="" data-src="images/img-66.jpg">
  98.         <img src="images/temp.jpg" alt="" data-src="images/img-67.jpg">
  99.         <img src="images/temp.jpg" alt="" data-src="images/img-68.jpg">
  100.         <img src="images/temp.jpg" alt="" data-src="images/img-69.jpg">
  101.         <img src="images/temp.jpg" alt="" data-src="images/img-70.jpg">
  102.     </div>
  103. js
  104.         // 所有图片
  105.         const imgs = document.querySelectorAll('.container > img');
  106.         // 图片加载函数
  107.         function imgLoad() {
  108.             // 视口高度
  109.             let viewHeight = document.documentElement.clientHeight;
  110.             // 滚动距离
  111.             let scrollTop = document.documentElement.scrollTop;
  112.             imgs.forEach((img) => {
  113.                 // 判断是否进入视口
  114.                 if (img.offsetTop <= viewHeight + scrollTop) {
  115.                     setTimeout(() => {
  116.                         img.src = img.dataset.src;
  117.                     }, 500);
  118.                 }
  119.             });
  120.         }
  121.         // 加载时
  122.         window.addEventListener('load', imgLoad);
  123.         // 滚动条
  124.         window.addEventListener('scroll', imgLoad);
  125.         // 视口变化时
  126.         window.addEventListener('resize', imgLoad);
  127. 轮播图
  130. css
  131. /* 初始化 */
  132. * {
  133.   margin: 0;
  134.   padding: 0;
  135.   box-sizing: border-box;
  136. }
  137. a {
  138.   text-decoration: none;
  139. }
  140. /* 轮播图的容器 */
  141. .container {
  142.   width: 62.5em;
  143.   height: 22em;
  144.   margin: 1em auto;
  145.   /* 转为定位元素/定位父级 */
  146.   position: relative;
  147. }
  148. /* 图片组 */
  149. .container > .imgs img {
  150.   width: 100%;
  151.   height: 100%;
  152.   /* 默认全部隐藏 */
  153.   display: none;
  154.   /* 将所有的图片进行绝对定位，确保每一次只看到一张,所有图片共享这个容器 */
  155.   position: absolute;
  156.   left: 0;
  157.   top: 0;
  158. }
  159. /* 设置默认显示的图片(第一张) */
  160. .container > .imgs img.active {
  161.   display: block;
  162. }
  163. /* 按钮组(独立按钮) */
  164. .container > .btns {
  165.   position: absolute;
  166.   left: 0;
  167.   right: 0;
  168.   bottom: 0;
  169.   /* 水平居中 */
  170.   text-align: center;
  171. }
  172. .container > .btns a {
  173.   /* 转成行内块元素: 即能水平排列,双支持宽度设置 */
  174.   display: inline-block;
  175.   padding: 0.5em;
  176.   margin: 0 0.2em;
  177.   background-color: #fff;
  178.   border-radius: 50%;
  179. }
  180. .container > .btns a.active {
  181.   background-color: #000;
  182. }
  183. /* 翻页按钮 */
  184. .container .skip a {
  185.   position: absolute;
  186.   width: 2.5rem;
  187.   height: 5rem;
  188.   line-height: 5rem;
  189.   text-align: center;
  190.   opacity: 0.3;
  191.   top: 9rem;
  192.   font-weight: lighter;
  193.   font-size: 2rem;
  194.   background-color: #ccc;
  195. }
  196. .container .skip .prev {
  197.   left: 0;
  198. }
  199. .container .skip .next {
  200.   right: 0;
  201. }
  202. .container .skip *:hover {
  203.   opacity: 0.6;
  204.   color: #666;
  205. }
  206. html
  207. <div class="container">
  208.     <!-- 1. 图片组 -->
  209.     <nav class="imgs">
  210.         <a href="#"><img src="banner/banner1.jpg" alt="" data-index="1" class="active" /></a>
  211.         <a href="#"><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
  212.         <a href="#"><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
  213.         <a href="#"><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
  214.     </nav>
  215.     <!-- 2. 图片中下部的小按钮 -->
  216.     <nav class="btns">
  217.     </nav>
  218.     <!-- 3. 翻页 -->
  219.     <nav class="skip">
  220.         <a href="#" class="prev">&lt;</a>
  221.         <a href="#" class="next">&gt;</a>
  222.     </nav>
  223. </div>
  224. javascript
  225.     // 获得元素
  226.     const imgs = document.querySelectorAll('.container >.imgs img');
  227.     const btnGroup = document.querySelector('.container > .btns');
  228.     const skips = document.querySelector('.container > .skip');
  229.     // 创建小按钮的函数
  230.     function createBtns(ele,imgLength) {
  231.         // 临时父类
  232.         let tempBtns = document.createDocumentFragment();
  233.         for (let i = 0; i < imgLength; i++) {
  234.             let a = document.createElement('a');
  235.             a.href = '#';
  236.             a.dataset.index = `${i + 1}`;
  237.             if ( i === 0) {
  238.                 a.classList.add('active');
  239.             }
  240.             tempBtns.append(a);
  241.         }
  242.         ele.append(tempBtns);
  243.     }
  244.     // 创建按钮
  245.     createBtns(btnGroup,imgs.length);
  246.     const btns = document.querySelectorAll('.container > .btns > *');
  247.     // 获得activeEle
  248.     function getActiveEle(eles) {
  249.         let activeEle = [...eles].filter((ele)=>ele.classList.contains('active'));
  250.         return activeEle[0];
  251.     }
  252.     // 设置active元素
  253.     function setActiveEle(Index) {
  254.         [imgs,btns].forEach((items) =>{
  255.             getActiveEle(items).classList.remove('active');
  256.             items.forEach((item)=>{
  257.                 if (item.dataset.index == Index) {
  258.                     item.classList.add('active');
  259.                 }
  260.             });
  261.         });
  262.     }
  263.     // 小按钮点击事件
  264.     btns.forEach((item)=>{item.addEventListener('click',(ev)=>{setActiveEle(ev.target.dataset.index)})});
  265.     // 获得当前active元素index
  266.     let currentEleIndex = getActiveEle(imgs).dataset.index;
  267.     // 上页 下页
  268.     skips.querySelector('.next').addEventListener('click', nextEle);
  269.     skips.querySelector('.prev').addEventListener('click', prevEle);
  270.     // 下页函数
  271.     function nextEle(ev) {
  272.         if ( ++currentEleIndex > imgs.length) {
  273.             currentEleIndex = imgs[0].dataset.index;
  274.         }
  275.         setActiveEle(currentEleIndex);
  276.     }
  277.     // 上页函数
  278.     function prevEle(ev){
  279.         if ( --currentEleIndex < imgs[0].dataset.index) {
  280.             currentEleIndex = imgs[imgs.length - 1].dataset.index;
  281.         }
  282.         setActiveEle(currentEleIndex);
  283.     }
  284.     // 轮播
  285.     const container = document.querySelector('.container');
  286.     container.addEventListener('mouseover', stopRun, false);
  287.     container.addEventListener('mouseout', startRun, false);
  288.     container.addEventListener('run', nextEle);
  289.     // 定时器
  290.     let timer = [];
  291.     const evt = new Event('run');
  292.     function startRun(ev) {
  293.         timer = setInterval('container.dispatchEvent(evt)',2000);
  294.     }
  295.     function stopRun(ev) {
  296.         clearInterval(timer);
  297.     }

更多相关文章

  1. 轮播图实现
  2. Ajax中的get与post请求，选项卡与懒加载技术
  3. Ajax请求实例,与懒加载技术
  4. html 背景图片全局填充
  5. php检测扩展有没有加载成功的几种方法
  6. PHP:composer自动加载机制；创建动态分页； 使用三方验证码库；
  7. PHP:文件上传上传限制,文件大小不超过5M,文件后缀设置，检查图片合
  8. 【PHP动态分页】composer自动加载机制和第三方验证码库的使用以
  9. 详解支撑7亿用户搜索的百度图片处理收录中台

随机推荐

  1. MySql索引的优缺点
  2. [转]swoole安装报错详解 mysqlnd_find_ch
  3. 我需要介绍MongoDB / NoSQL数据库
  4. MySQL数据库辅助类
  5. Php数据库为GoJs格式化json
  6. MySql新建连接不能运行以及如何导入sql
  7. MySQL定时检查是否宕机并邮件通知
  8. MYSQL使用Select插入，如果选择返回多于1的
  9. cpanel导入大数据库(mysql)的方法
  10. mysql数据库中查看当前使用的数据库是哪