lazy load

index.html

@@ -747,7 +747,7 @@
         </div>
       </div>
     </div>
-    <div class="sec-favor d-none">
+    <!-- <div class="sec-favor d-none">
       <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
         <div class="container-fluid" style="padding:0 8px;margin:0;">
             <div class="navbar-brand navbar-back-fav me-0">
@@ -1023,7 +1023,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
     <!-- bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
@@ -1035,7 +1035,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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>
 </body>
 </html>

js/index.js

@@ -48,7 +48,7 @@ $(".sec-01__slider").slick({
       function renderBannerStr(sec, data) {
         let str = '';
         for(let i = 0; i < data.length; i++){
-            str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['imgUrl']}');"></div>`
+            str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>`
         }
         console.log(str);
         $(`.${sec}`).html(str);
@@ -70,7 +70,7 @@ $(".sec-01__slider").slick({
               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" style="background-image: url('${sub[j]['imgUrl']}');"></div>
+                  <div class="tabpar__card__imgfr" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
                   <p class="mt-2 pe-2">${sub[j]['title']}</p>
                 </div>`
               }
@@ -81,7 +81,7 @@ $(".sec-01__slider").slick({
               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" style="background-image: url('${sub[j]['imgUrl']}');"><img class="tabpar__card__play" src="images/Play-Button.webp"></div>
+                  <div class="tabpar__card__imgfr" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"><img class="tabpar__card__play lazyload" data-src="images/Play-Button.webp"></div>
                   <p class="mt-2 pe-2">${sub[j]['title']}</p>
                 </div>`
               }
@@ -92,7 +92,7 @@ $(".sec-01__slider").slick({
               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" style="background-image: url('${sub[j]['imgUrl']}');"></div>
+                  <div class="tabpar__card__imgfr" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
                   <p class="mt-2 pe-2">${sub[j]['title']}</p>
                 </div>`
               }
@@ -118,11 +118,11 @@ $(".sec-01__slider").slick({
           for(let i = 0; i < temp.length; i++){
               if(i === 0) {
                 str+= `<div class="carousel-item active" onclick="window.open('${temp[i]['link']}');"
-                  style="background-image: url('${temp[i]['imgUrl']}');">
+                  style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}">
                 </div>`
               } else {
                 str+= `<div class="carousel-item" onclick="window.open('${temp[i]['link']}');"
-                  style="background-image: url('${temp[i]['imgUrl']}');">
+                  style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}">
                 </div>`
               }
           }
@@ -135,7 +135,7 @@ $(".sec-01__slider").slick({
           for(let i = 0; i < temp.length; i++){
               str+= `
               <div class="sec-07__slider-${i+1} sec-07__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
-                <div class="sec-07__imgfr mb-2"><img src="${temp[i]['imgUrl']}" alt=""></div>
+                <div class="sec-07__imgfr mb-2"><img data-src="${temp[i]['imgUrl']}" alt="" class="lazyload"></div>
                 <p class="sec-07__cardtxt">${temp[i]['description']}</p>
               </div>`
           }
@@ -161,7 +161,7 @@ $(".sec-01__slider").slick({
           let temp = data[5]['data'];
           let str = '';
           for(let i = 0; i < temp.length; i++){
-              str+= `<div class="sec-08__slider-${i+1} mx-1 slide-item" style="width: 70vw; background-image: url('${temp[i]['imgUrl']}');" onclick="window.open('${temp[i]['link']}');"></div>`
+              str+= `<div class="sec-08__slider-${i+1} mx-1 slide-item" style="width: 70vw; background-image: url('${temp[i]['imgUrl']}');" onclick="window.open('${temp[i]['link']}');" data-bg="${temp[i]['imgUrl']}"></div>`
           }
           $('.sec-08__slider').html(str);
           $(".sec-08__slider").slick({
@@ -181,12 +181,12 @@ $(".sec-01__slider").slick({
           for(let i = 0; i < temp.length; i++){
             if(temp[i].video !== 'false') {
               str+= `<div class="sec-09__card" onclick="window.open('${temp[i]['link']}');">
-                    <div class="sec-09__card__imgfr" style="background-image: url('${temp[i]['imgUrl']}');"><img class="sec-09__card__play" src="images/Play-Button.webp"></div>
+                    <div class="sec-09__card__imgfr" 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>${temp[i]['title']}</p>
                     </div>`
             } else {
               str+= `<div class="sec-09__card" onclick="window.open('${temp[i]['link']}');">
-                    <div class="sec-09__card__imgfr" style="background-image: url('${temp[i]['imgUrl']}');"></div>
+                    <div class="sec-09__card__imgfr" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
                     <p>${temp[i]['title']}</p>
                     </div>`
             }
@@ -215,12 +215,12 @@ $(".sec-01__slider").slick({
           for(let i = 0; i < data.length; i++){
             if(data[i].video !== 'false') {
               str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
-                    <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');"><img class="${sec}__card__play" src="images/Play-Button.webp"></div>
+                    <div class="${sec}__slider-${i+1} mb-2 slide-item" 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>
                     <p class="${sec}__cardtxt">${data[i]['title']}</p>
                     </div>`;
             } else {
               str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
-                    <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');"></div>
+                    <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>
                     <p class="${sec}__cardtxt">${data[i]['title']}</p>
                     </div>`;
             }
@@ -333,6 +333,13 @@ searchHotLink.forEach((item, i) => {
   })
 })
 
+document.addEventListener('lazybeforeunveil', function(e){
+  var bg = e.target.getAttribute('data-bg');
+  if(bg){
+      e.target.style.backgroundImage = 'url(' + bg + ')';
+  }
+});
+
     //jQuery time
 var current_fs, next_fs, previous_fs; //fieldsets
 var left, opacity, scale; //fieldset properties which we will animate