亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 22
粉絲 1
評(píng)論 1
訪問(wèn)量 26598
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JS-懶加載（原生）-- php培訓(xùn)十期線上班
Miss灬懶蟲(chóng)
原創(chuàng)
994人瀏覽過(guò)

JS-tab標(biāo)簽頁(yè)（原生）

關(guān)于案例

當(dāng)前案例，還存在一個(gè)小問(wèn)題，就是頁(yè)面加載如果不滾動(dòng)一下鼠標(biāo)，就一直是默認(rèn)圖片，不過(guò)懶加載的原理還是能看出來(lái)滴，多多包涵哦！

JS代碼中有一些說(shuō)明注釋，可以詳細(xì)看一下哦！

運(yùn)行效果

案例代碼

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JS基礎(chǔ)-懶加載的原理與范例</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body{
  12.             background-color: #cccccc;
  13.         }
  14.         h2{
  15.             line-height: 30px;
  16.             text-align: center;
  17.             margin: 10px auto;
  18.         }
  19.         img{
  20.             width: 400px;
  21.             height: 400px;
  22.             border: 1px dashed #cccccc;
  23.             margin-bottom: 10px;
  24.             display: block;
  25.         }
  26.         .lazy-container{
  27.             width: 400px;
  28.             background-color: #ffffff;
  29.             margin: 0 auto;
  30.             padding: 20px;
  31.             border-radius: 6px;
  32.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <h2>懶加載-范例</h2>
  38.     <div class="lazy-container">
  39.         <img src="images/temp.jpg" alt="" al="" data-src="images/1.jpg">
  40.         <img src="images/temp.jpg" alt="" al="" data-src="images/2.jpg">
  41.         <img src="images/temp.jpg" alt="" al="" data-src="images/3.jpg">
  42.         <img src="images/temp.jpg" alt="" al="" data-src="images/4.jpg">
  43.         <img src="images/temp.jpg" alt="" al="" data-src="images/5.jpg">
  44.         <img src="images/temp.jpg" alt="" al="" data-src="images/6.jpg">
  45.         <img src="images/temp.jpg" alt="" al="" data-src="images/7.jpg">
  46.         <img src="images/temp.jpg" alt="" al="" data-src="images/8.jpg">
  47.         <img src="images/temp.jpg" alt="" al="" data-src="images/9.jpg">
  48.         <img src="images/temp.jpg" alt="" al="" data-src="images/10.jpg">
  49.         <img src="images/temp.jpg" alt="" al="" data-src="images/11.jpg">
  50.         <img src="images/temp.jpg" alt="" al="" data-src="images/12.jpg">
  51.         <img src="images/temp.jpg" alt="" al="" data-src="images/13.jpg">
  52.         <img src="images/temp.jpg" alt="" al="" data-src="images/14.jpg">
  53.         <img src="images/temp.jpg" alt="" al="" data-src="images/15.jpg">
  54.         <img src="images/temp.jpg" alt="" al="" data-src="images/16.jpg">
  55.         <img src="images/temp.jpg" alt="" al="" data-src="images/17.jpg">
  56.         <img src="images/temp.jpg" alt="" al="" data-src="images/18.jpg">
  57.         <img src="images/temp.jpg" alt="" al="" data-src="images/19.jpg">
  58.         <img src="images/temp.jpg" alt="" al="" data-src="images/20.jpg">
  59.         <img src="images/temp.jpg" alt="" al="" data-src="images/21.jpg">
  60.         <img src="images/temp.jpg" alt="" al="" data-src="images/22.jpg">
  61.         <img src="images/temp.jpg" alt="" al="" data-src="images/23.jpg">
  62.         <img src="images/temp.jpg" alt="" al="" data-src="images/24.jpg">
  63.     </div>
  64.     <script src="js/lazy.js"></script>
  65. </body>
  66. </html>

lazy.js

  1. /**
  2.  * 概念：
  3.  * 1-可視區(qū)：我們可以直接看見(jiàn)的 頁(yè)面內(nèi)容區(qū)域;
  4.  * 2-滾動(dòng)距離：可是區(qū)邊框，距離文檔頂部的距離
  5.  * （一個(gè)web頁(yè)面一般都存在滾動(dòng)條，滾動(dòng)距離就是滾出的部分）;
  6.  * 3-相對(duì)頂部距離：就是頁(yè)面元素，相對(duì)于文檔頂部的距離（也就是HTML標(biāo)簽）;
  7.  * 
  8.  * 涉及屬性：
  9.  * 1-document.documentElement: 文檔根節(jié)點(diǎn) HTML標(biāo)簽;
  10.  * 2-clientHeight: 當(dāng)前元素可視區(qū)的高度；
  11.  * 3-scrollTop: 當(dāng)前元素的滾動(dòng)距離；
  12.  * 4-offsetTop: 當(dāng)前元素相對(duì)頂部距離
  13.  * 
  14.  * 原理：
  15.  * 1-整個(gè)頁(yè)面的可視區(qū)是HTML標(biāo)簽的區(qū)域；
  16.  * 2-如果當(dāng)前元素的 `相對(duì)頂部距離`>= 可視區(qū)高度+滾動(dòng)距離，那么就加載元素
  17.  * 否則暫不加載；
  18.  */
  20. //獲取所有圖片
  21. var imgs = document.querySelectorAll('img');
  23. //獲取頁(yè)面可視區(qū)高度
  24. var clientHeight = document.documentElement.clientHeight;
  27. //滾動(dòng)事件監(jiān)聽(tīng)器
  28. window.addEventListener('scroll',function(event){
  29.     //獲取滾動(dòng)距離
  30.     var scrollTop = document.documentElement.scrollTop;
  32.     //遍歷圖片，根據(jù)是否在可視區(qū)域，替換 src屬性值
  33.     imgs.forEach(function(img){
  34.         if(img.offsetTop<=(clientHeight+scrollTop)){
  35.             img.src=img.dataset.src;
  36.         }
  37.     });
  38. },false);
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)