stackoom
  简体   繁体   中英

Javascript code working locally but does not work on live site

 原文  2019-08-23 13:44:01  1   2    javascript/ html/ css

Question

I have small javascript code used to give class to images based on the height and width ratio. if ratio between width and height is between 1.05 and 0.95 give class of Square, greater than 1.8 give class of fulllandscape, if between 1.8 and 1.05 landscape, smaller than 0.95 then portrait.

the code works fine locally. It adds right classes based on these ratio.

But on my live site, it's not assigning the right classes. It seems to give class "square" as default and not correctly assign the right class.

I checked the syntex and double checked the math but it still does not work.

Even running the code snippet, it seems to work but not on my live site.

live site where it doesn't work

It is giving class square to all the images.

Checking the console, it doesn't seem to show anything related to this code and I can't pinpoint the issue.

Please help me find what's wrong and help me fix this issue.

Apprecite all the help. 

 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 answers

solution1
 2 ACCPTED  2019-08-23 14:32:28

The problem is your using an image loader, I assume it's some sort of scroll into view loader etc.

Problem is, your using window.onload event, this fires when the DOM is loaded & images are ready etc, but your loader is going to bypass that.

So it's better to attach to the image load event directly instead.

eg.

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

Note: don't place this code inside window.onload event now, as we don't want to wait for all images to load. An added bonus, for slow loading images we now don't wait for all images to load first. 

 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>

solution2
 0  2019-08-23 13:52:32

You have a lot of errors on your page that say that scripts couldn't be loaded and there's also a "ReferenceError: event is not defined"

F12 in your browser opens the dev console with the log. This gives you more details. I guess you need to fix those errors.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question html and javascript slider working locally but doesn't work in live server Javascript setInterval working on localhost but does't work on live Javascript not working on localhost, but it is working on Live site Scroll function disabled locally, still working on live site Jquery .toggle does not work on live site JavaScript code works in localhost but not in live site? Javascript google geolocation is not working in live site js code working in editor but not on live site slideshow works locally but not on live site 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
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM