add onload

themes/hugo-universal-theme-master/static/js/bhouse.js

@@ -23,71 +23,139 @@ $(window).resize(function () {
 let imgCount = $(".slide_single_img").length;
 let heightImg = [];
 
-$('.slide_single_img').each(function (i) { // jquery.each() 循環讀取所有圖片
-  let height = $(this).height();
-  let width = $(this).width();
-  let x = (height / width);
-  console.log('index', i);
-  console.log('height / width = ', x);
-  if (x >= 1) {
-    console.log('長圖',i);
-    if (i===0) {
-      return;
+window.onload = function() {
+  console.log('onload');
+  $('.slide_single_img').each(function (i) { // jquery.each() 循環讀取所有圖片
+    let height = $(this).height();
+    let width = $(this).width();
+    let x = (height / width);
+    console.log('index', i);
+    console.log('height / width = ', x);
+    if (x >= 1) {
+      console.log('長圖',i);
+      if (i===0) {
+        return;
+      }
+      heightImg.push($(this));
+      // 預設高度為 0
+      $(this).css({
+        'height': 0 + 'px',
+        "margin": 'auto',
+      });
     }
-    heightImg.push($(this));
-    // 預設高度為 0
-    $(this).css({
-      'height': 0 + 'px',
-      "margin": 'auto',
-    });
-  }
-});
-
-let heightImgIndex = [];
-
-function getAllIndex(arr) {
-  // 篩選符合條件 Index
-  for (i = 0; i < arr.length; i++) {
-    if (arr[i].height === 0)
-      heightImgIndex.push(i);
+  });
+  
+  let heightImgIndex = [];
+  
+  function getAllIndex(arr) {
+    // 篩選符合條件 Index
+    for (i = 0; i < arr.length; i++) {
+      if (arr[i].height === 0)
+        heightImgIndex.push(i);
+    }
+    return heightImgIndex;
   }
-  return heightImgIndex;
-}
-let allSlideImg = document.querySelectorAll('.slide_single_img');
-getAllIndex(allSlideImg);
-
-// 取得 slick 當前的 Index
-$('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
-  for (i = 0; i < heightImgIndex.length; i++) {
-    console.log(heightImgIndex[i]);
-    if (nextSlide == heightImgIndex[i]) {
-      allSlideImg[nextSlide].style.cssText = `
-      height: 500px; 
-      margin: auto;
-    `;
+  let allSlideImg = document.querySelectorAll('.slide_single_img');
+  getAllIndex(allSlideImg);
+  
+  // 取得 slick 當前的 Index
+  $('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+    for (i = 0; i < heightImgIndex.length; i++) {
+      console.log(heightImgIndex[i]);
+      if (nextSlide == heightImgIndex[i]) {
+        allSlideImg[nextSlide].style.cssText = `
+        height: 500px; 
+        margin: auto;
+      `;
+      } else {
+        allSlideImg[heightImgIndex[i]].style.height = '0px';
+      }
+    }
+  });
+  
+  $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
+    var height = $(this).height();
+    var width = $(this).width();
+    let x = (height / width);
+    if (x > 1) {
+      $(this).css({
+        'width': 100 + 'px',
+        "margin": 'auto',
+        "padding": "0px",
+      });
     } else {
-      allSlideImg[heightImgIndex[i]].style.height = '0px';
+      $(this).css({
+        "margin-top": '30px',
+        "padding": "5px",
+      });
     }
-  }
-});
-
-$('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
-  var height = $(this).height();
-  var width = $(this).width();
-  let x = (height / width);
-  if (x > 1) {
-    $(this).css({
-      'width': 100 + 'px',
-      "margin": 'auto',
-      "padding": "0px",
-    });
-  } else {
-    $(this).css({
-      "margin-top": '30px',
-      "padding": "5px",
-    });
-  }
-});
+  });
+}
+// $('.slide_single_img').each(function (i) { // jquery.each() 循環讀取所有圖片
+//   let height = $(this).height();
+//   let width = $(this).width();
+//   let x = (height / width);
+//   console.log('index', i);
+//   console.log('height / width = ', x);
+//   if (x >= 1) {
+//     console.log('長圖',i);
+//     if (i===0) {
+//       return;
+//     }
+//     heightImg.push($(this));
+//     // 預設高度為 0
+//     $(this).css({
+//       'height': 0 + 'px',
+//       "margin": 'auto',
+//     });
+//   }
+// });
+
+// let heightImgIndex = [];
+
+// function getAllIndex(arr) {
+//   // 篩選符合條件 Index
+//   for (i = 0; i < arr.length; i++) {
+//     if (arr[i].height === 0)
+//       heightImgIndex.push(i);
+//   }
+//   return heightImgIndex;
+// }
+// let allSlideImg = document.querySelectorAll('.slide_single_img');
+// getAllIndex(allSlideImg);
+
+// // 取得 slick 當前的 Index
+// $('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+//   for (i = 0; i < heightImgIndex.length; i++) {
+//     console.log(heightImgIndex[i]);
+//     if (nextSlide == heightImgIndex[i]) {
+//       allSlideImg[nextSlide].style.cssText = `
+//       height: 500px; 
+//       margin: auto;
+//     `;
+//     } else {
+//       allSlideImg[heightImgIndex[i]].style.height = '0px';
+//     }
+//   }
+// });
+
+// $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
+//   var height = $(this).height();
+//   var width = $(this).width();
+//   let x = (height / width);
+//   if (x > 1) {
+//     $(this).css({
+//       'width': 100 + 'px',
+//       "margin": 'auto',
+//       "padding": "0px",
+//     });
+//   } else {
+//     $(this).css({
+//       "margin-top": '30px',
+//       "padding": "5px",
+//     });
+//   }
+// });
 
 $('.style_house_sec02 .slider-for').slick({
   slidesToShow: 1,