add bg-src

index.html

@@ -1651,7 +1651,7 @@
         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>
 </body>
 

js/index.js

@@ -44,7 +44,7 @@ let result;
     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]['DimgUrl']}');"></div>`
+            str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></div>`
         }
         $(`.${sec}`).html(str);
     }
@@ -65,7 +65,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']}');"></div>
+                    <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
                     <h5 class="mb-2 me-2">${sub[j]['title']}</h5>
                     <p class="mt-2">${sub[j]['description']}</p>
                 </div>`;
@@ -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']}');"><img src="images/Play-Button.png" 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 src="images/Play-Button.png" alt="" class="tabpar__card__play"></div>
                 <h5 class="mb-2  me-2">${sub[j]['title']}</h5>
                 <p class="mt-2">${sub[j]['description']}</p>
             </div>`;
@@ -89,7 +89,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']}');"></div>
+                <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
                 <h5 class="mb-2  me-2">${sub[j]['title']}</h5>
                 <p class="mt-2">${sub[j]['description']}</p>
             </div>`;
@@ -138,13 +138,13 @@ 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']}');"><img class="sec-06__card__play" src="images/Play-Button.png"></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" src="images/Play-Button.png"></div></div>
                     <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
                     <p class="mt-2">${temp[i]['description']}</p>
                     </div>`;
             } else {
                 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']}');"></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']}"></div></div>
                     <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
                     <p class="mt-2">${temp[i]['description']}</p>
                     </div>`;
@@ -172,7 +172,7 @@ let result;
         let temp = data[5]['data'];
         let str = '';
         for(let i = 0; i < temp.length; i++){
-            str+= `<div class="sec-07__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
+            str+= `<div class="sec-07__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>`
         }
         $(`.sec-07__slider`).html(str);
         $(".sec-07__slider").slick({
@@ -193,13 +193,13 @@ 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']}');"><img class="sec-08__card__play" src="images/Play-Button.png"></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" src="images/Play-Button.png"></div>
                         <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
                         <p class="mb-2 me-2">${temp[i]['description']}</p>
                     </div>`;
             } else {
                 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']}');"></div>
+                        <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
                         <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
                         <p class="mb-2 me-2">${temp[i]['description']}</p>
                     </div>`;
@@ -232,12 +232,12 @@ 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']}');"><img class="sec-09__card__play" src="images/Play-Button.png"></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" src="images/Play-Button.png"></div>
                       <p class="sec-09__cardtxt">${temp[i]['title']}</p>
                     </div>`
             } else {
                 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']}');"></div>
+                      <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
                       <p class="sec-09__cardtxt">${temp[i]['title']}</p>
                     </div>`
             }
@@ -271,13 +271,13 @@ 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']}');"><img class="${sec}__card__play" src="images/Play-Button.png"></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" src="images/Play-Button.png"></div>
                         <h5 class="me-2">${data[i]['title']}</h5>
                         <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
                     </div>`
             } else {
                 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']}');"></div>
+                        <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>
                         <h5 class="me-2">${data[i]['title']}</h5>
                         <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
                     </div>`
@@ -409,6 +409,12 @@ function todayTV() {
     window.open(`https://hhh.com.tw/program/?tv=gstv&date=${utc}&type=tv`);
 }
 
+document.addEventListener('lazybeforeunveil', function(e){
+    var bg = e.target.getAttribute('data-bg');
+    if(bg){
+        e.target.style.backgroundImage = 'url(' + bg + ')';
+    }
+});
 
 // city result