lazy load

index.html

@@ -33,7 +33,7 @@
         rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
         crossorigin="anonymous">
         
-      <link rel="stylesheet" href="css/jquery-ui.css">
+      <!-- <link rel="stylesheet" href="css/jquery-ui.css"> -->
       <link rel="stylesheet" type="text/css" href="css/slick.css" />
       <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
 
@@ -844,19 +844,19 @@
               <div class="row mb-2">
                 <a href="https://hhh.com.tw/event170427/" class="col card px-3 pt-3 pb-4 text-center mx-2">
                   <h5 class="card-title">老屋翻新<br>住宅改造</h5>
-                  <div class="card__imgfr"><img src="images/renovation.webp" alt=""></div>
+                  <div class="card__imgfr"><img data-src="images/renovation.webp" class="lazyload" alt=""></div>
                 </a>
                 <a href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php" class="col card px-3 pt-3 pb-4 text-center mx-2">
                   <h5 class="card-title">觀眾最愛<br>設計師</h5>
-                  <div class="card__imgfr"><img src="images/designerlink.webp" alt=""></div>
+                  <div class="card__imgfr"><img data-src="images/designerlink.webp" alt="" class="lazyload"></div>
                 </a>
                 <a href="https://event.hhh.com.tw/2021-Top-Brands/" class="col card px-3 pt-3 pb-4 text-center mx-2">
                     <h5 class="card-title">消費者<br>愛用品牌</h5>
-                    <div class="card__imgfr"><img src="images/brandlink.webp" alt=""></div>
+                    <div class="card__imgfr"><img data-src="images/brandlink.webp" alt="" class="lazyload"></div>
                 </a>
                 <a href="https://event.hhh.com.tw/topglory/" class="col card px-3 pt-3 pb-4 text-center mx-2">
                     <h5 class="card-title">GLORY<br>國際大賞</h5>
-                    <div class="card__imgfr"><img src="images/awardlink.webp" alt=""></div>
+                    <div class="card__imgfr"><img data-src="images/awardlink.webp" alt="" class="lazyload"></div>
                 </a>
               </div>
             </div>
@@ -1007,7 +1007,7 @@
                 <div class="pb-2 sec-06__title"><h3 class="mb-2">最新影音</h3></div>
                 <div class="w-100 sec-06__left">
                   <div class="sec-06__video" data-bs-toggle="modal" data-bs-target="#videoModal">
-                    <img src="images/Play-Button.webp" alt="" class="sec-06__video__play">
+                    <img data-src="images/Play-Button.webp" alt="" class="sec-06__video__play lazyload">
                     <div class="sec-06__video__imgfr"></div>
                   </div>
                   <div class="sec-06__videotxt">EP.2 永久棟距開闊視野生態濕地公園首排連呼吸都療癒</div>
@@ -1352,7 +1352,7 @@
               <img src="images/gotop.png" width="28" alt="">
             </div> -->
             <div class="btn-gotop">
-              <img src="images/gotop.webp" width="28" alt="">
+              <img data-src="images/gotop.webp" width="28" alt="" class="lazyload">
             </div>
           </div>
           <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
@@ -1651,8 +1651,8 @@
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
-    <script src="js/lazy-load.js" async></script>
     <script async defer src="js/index.js"></script>
+    <script src="js/lazy-load.js" async></script>
 </body>
 
 </html>

js/index.js

@@ -77,7 +77,7 @@ let result;
               let sub = temp[i]["data"];
               for(let j = 0; j < sub.length; j++){
                 str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
-                <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"><img src="images/Play-Button.webp" alt="" class="tabpar__card__play"></div>
+                <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"><img data-src="images/Play-Button.webp" alt="" class="tabpar__card__play lazyload"></div>
                 <h5 class="mb-2  me-2">${sub[j]['title']}</h5>
                 <p class="mt-2">${sub[j]['description']}</p>
             </div>`;
@@ -138,7 +138,7 @@ let result;
         for(let i = 0; i < temp.length; i++){
             if(temp[i].video == 'true'){
                 str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
-                    <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-06__card__play" src="images/Play-Button.webp"></div></div>
+                    <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-06__card__play lazyload" data-src="images/Play-Button.webp"></div></div>
                     <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
                     <p class="mt-2">${temp[i]['description']}</p>
                     </div>`;
@@ -193,7 +193,7 @@ let result;
         for(let i = 0; i < temp.length; i++){
             if(temp[i].video == 'true'){
                 str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
-                        <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-08__card__play" src="images/Play-Button.webp"></div>
+                        <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-08__card__play lazyload" data-src="images/Play-Button.webp"></div>
                         <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
                         <p class="mb-2 me-2">${temp[i]['description']}</p>
                     </div>`;
@@ -232,7 +232,7 @@ let result;
         for(let i = 0; i < temp.length; i++){
             if(temp[i].video !== 'false') {
                 str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
-                      <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-09__card__play" src="images/Play-Button.webp"></div>
+                      <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-09__card__play lazyload" data-src="images/Play-Button.webp"></div>
                       <p class="sec-09__cardtxt">${temp[i]['title']}</p>
                     </div>`
             } else {
@@ -271,7 +271,7 @@ let result;
             }
             if(data[i].video !== 'false') {
                 str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
-                        <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"><img class="${sec}__card__play" src="images/Play-Button.webp"></div>
+                        <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"><img class="${sec}__card__play lazyload" data-src="images/Play-Button.webp"></div>
                         <h5 class="me-2">${data[i]['title']}</h5>
                         <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
                     </div>`