[英]Javascript code working locally but does not work on live site
我有一些小的 javascript 代码用于根据高度和宽度比为图像提供类。 如果宽高比在 1.05 和 0.95 之间，则为 Square 类，大于 1.8 为 fulllandscape 类，如果在 1.8 和 1.05 之间，则为横向，小于 0.95 则为纵向。
该代码在本地运行良好。 它根据这些比率添加正确的类。
但是在我的实时站点上，它没有分配正确的类。 它似乎将类“square”作为默认值，而没有正确分配正确的类。
我检查了语法并仔细检查了数学，但它仍然不起作用。
即使运行代码片段，它似乎也能工作，但不能在我的实时站点上运行。
它为所有图像提供类正方形。
检查控制台，它似乎没有显示与此代码相关的任何内容，我无法查明问题。
请帮我找出问题所在并帮我解决这个问题。
感谢所有的帮助。
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>
问题是您使用了图像加载器，我认为它是某种滚动到视图加载器等。
问题是，您使用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>
您的页面上有很多错误，表明无法加载脚本，并且还有“ReferenceError: event is not defined”
浏览器中的 F12 打开带有日志的开发控制台。 这为您提供了更多详细信息。 我想你需要修复这些错误。
html 和 javascript slider 在本地工作，但在实时服务器中不起作用
[英]html and javascript slider working locally but doesn't work in live server
Javascript setInterval可在localhost上运行，但不能实时运行
[英]Javascript setInterval working on localhost but does't work on live
Javascript 不能在 localhost 上运行，但它可以在 Live 站点上运行
[英]Javascript not working on localhost, but it is working on Live site
html 文件中的 javascript 在我使用 VS Code 的实时服务器中工作正常，但如果我在本地打开 .html 文件，它就不起作用
[英]javascript in a html file works fine in my live server using VS Code but if i open the .html file locally it doesn't work
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.