Javascript代码在本地有效，但在实时站点上无效

时间：2019-08-23 13:44:01

标签： javascript html css

我有一些小的javascript代码，用于根据高度和宽度比为图像提供类。 如果宽高比在1.05至0.95之间，则给出正方形的等级，大于1.8，则给出全地形的等级，如果在1.8和1.05之间，则小于0.95，则表示纵向。

该代码在本地运行良好。它根据这些比率添加正确的类。

但是在我的实时站点上，它没有分配正确的类。似乎默认将“ square”类设为默认值，而没有正确分配正确的类。

我检查了语法并仔细检查了数学，但仍然无法正常工作。

即使运行代码段，它似乎也可以正常运行，但在我的实时网站上却无法运行。

live site where it doesn't work

它为所有图像提供了正方形。

检查控制台，它似乎没有显示与此代码相关的任何内容，我无法查明问题所在。

请帮助我找出问题所在，并帮助我解决此问题。

感谢所有帮助。

function applyImageClass(image) {
  var h = (image) ? image.height() : 0;
  if (h > 0) {
    var ratio = image.width() / h;
    if (ratio <= 1.05 && ratio >= 0.95) {
      image.addClass('square');
    } else if (ratio >= 1.8) {
      image.addClass('fulllandscape');
    } else if (ratio < 1.8 && ratio > 1.05) {
      image.addClass('landscape');
    } else if (ratio < 0.95) {
      image.addClass('portrait');
    }
  }
}

$(window).on('load', function() {
  // Find all images contained in any element that has any of the classes
  $('.imagesection').find('img').each(function() {
    // Call the function for each one of the matched elements
    applyImageClass($(this));
  });
});
.detailsection img{max-width:800px;}

.imagesection {
  max-width: 1000px;
  margin: 0 auto;
}

.imagesection img {
  float: left;
}

.imagesection img.fulllandscape {
  max-width: 1000px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.imagesection img.landscape {
  max-width: 1000px;
  width: 49%;
  height: auto;
  margin: 0 auto;
  padding: 3% 3%;
  box-sizing: border-box;
}

.imagesection img.portrait {
  width: 49%;
  margin: 0 auto;
  float: left;
  padding: 3% 10%;
  box-sizing: border-box;
}

.imagesection img.square {
  max-width: 1000px;
  width: 50%;
  height: auto;
  margin: 0 auto;
  padding: 3% 3%;
  box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="image.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
  <script src="image2.js"></script>
</head>

<body>

  <div class="detailsection">

    <!--Detail Title Image-->
    <div class="titlepg">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/title.jpg" alt="" class="titlepg">
    </div>
    <!--Detail Title Image-->


    <!--Image section-->
    <div class="imagesection">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet1.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet2.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet3.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet4.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet11.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet5.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet6.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet7.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet8.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet12.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet9.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet10.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/DSC_8836.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/DSC_8662.jpg" alt="">

    </div>
    <!--Image section-->


  </div>


</body>

</html>

2 个答案:

答案 0 :(得分：2)

问题是您使用的是图像加载器，我认为这是滚动到视图加载器中的一种方式。

问题是，您正在使用window.onload事件，该事件在加载DOM和准备好映像等时触发，但是您的加载器将绕过该事件。

因此，最好直接附加到图像加载事件。

例如

$('.imagesection').find('img').each(function() {
  $(this).load(applyImageClass.bind(null, $(this)));
});
  

注意：由于我们现在没有将这段代码放入window.onload事件中   不想等待所有图像加载。额外的奖励，速度慢   加载图像，我们现在不必等待所有图像都首先加载。

function applyImageClass(image) {
  var h = (image) ? image.height() : 0;
  if (h > 0) {
    var ratio = image.width() / h;
    if (ratio <= 1.05 && ratio >= 0.95) {
      image.addClass('square');
    } else if (ratio >= 1.8) {
      image.addClass('fulllandscape');
    } else if (ratio < 1.8 && ratio > 1.05) {
      image.addClass('landscape');
    } else if (ratio < 0.95) {
      image.addClass('portrait');
    }
  }
}

$('.imagesection').find('img').each(function() {
  $(this).load(applyImageClass.bind(null, $(this)));
});
.detailsection img{max-width:800px;}

.imagesection {
  max-width: 1000px;
  margin: 0 auto;
}

.imagesection img {
  float: left;
}

.imagesection img.fulllandscape {
  max-width: 1000px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.imagesection img.landscape {
  max-width: 1000px;
  width: 49%;
  height: auto;
  margin: 0 auto;
  padding: 3% 3%;
  box-sizing: border-box;
}

.imagesection img.portrait {
  width: 49%;
  margin: 0 auto;
  float: left;
  padding: 3% 10%;
  box-sizing: border-box;
}

.imagesection img.square {
  max-width: 1000px;
  width: 50%;
  height: auto;
  margin: 0 auto;
  padding: 3% 3%;
  box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="image.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
  <script src="image2.js"></script>
</head>

<body>

  <div class="detailsection">

    <!--Detail Title Image-->
    <div class="titlepg">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/title.jpg" alt="" class="titlepg">
    </div>
    <!--Detail Title Image-->


    <!--Image section-->
    <div class="imagesection">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet1.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet2.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet3.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet4.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet11.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet5.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet6.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet7.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet8.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet12.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet9.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/droplet10.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/DSC_8836.jpg" alt="">
      <img src="http://innofeel60.cafe24.com/web/productdetail/kitchendining/%EB%AC%BC%EB%B0%A9%EC%9A%B8%EC%88%98%EC%A0%80%EB%B0%9B%EC%B9%A8/img/DSC_8662.jpg" alt="">

    </div>
    <!--Image section-->


  </div>


</body>

</html>

答案 1 :(得分：0)

页面上有很多错误，表明无法加载脚本，并且还存在“ ReferenceError：未定义事件”

浏览器中的

F12会打开带有日志的开发人员控制台。这给您更多细节。我想您需要修复这些错误。

相关问题
最新问题