在Gunicorn / Nginx上部署Django站点时出现JS / Jquery问题（在DigitalOcean上）
[英]JS/Jquery issue when deploying Django site on with Gunicorn/Nginx (on DigitalOcean)
问题描述
TL;DR. 
TL; DR。 Main question at the bottom. 底部的主要问题。
I've made a django website and wanted to dynamically make an image fill in a div tag. 我已经建立了一个django网站，并希望动态地将图像填充div标签。 Here's the JS/JQuery function I wrote: 这是我编写的JS / JQuery函数：
function changeBGSize(){
$(document).ready(function(){
var posX = -1 * (($("#myPic").width())/2);
var posY = -1 * ($("#myPic").height() - $(window).outerHeight())/2;
$("#myPic").css("margin-left", (posX + "px"));
$("#myPic").css("margin-top", (posY + "px"));
})
}
Inside the HTML I have an image with the ID myPic nested in divs. 在HTML内，我有一幅ID为myPic的图像嵌套在div中。 It might be useful to add that I'm also using Bootstrap v3. 补充一点，就是我也在使用Bootstrap v3。
I call the above function in 2 ways: 我通过两种方式调用上述函数：
-
window.onload = changeBGSize;in the main JS在主要的JS中 -
<body onresize="changeBGSize();">in the HTMLHTML中的<body onresize="changeBGSize();">
WHen I deploy the website on local host using python manage.py runserver the website works fine and the picture is centered as I want it. 当我使用python manage.py runserver将网站部署在本地主机上时，网站运行正常，图片按我的意愿居中。
But the problem is when I deploy it to my DigitalOcean droplet. 但是问题是当我将其部署到我的DigitalOcean Droplet上时。 My droplet is a linux ubuntu 14 machine, and uses Gunicorn and Nginx to serve static files. 我的Droplet是linux ubuntu 14机器，并使用Gunicorn和Nginx提供静态文件。 For some reason the JQuery function above does not work when the screen is loaded, but it works when called through the onresize event. 由于某种原因，上面的JQuery函数在加载屏幕时不起作用，但是在通过onresize事件调用时起作用。
After debugging I've come to realize that $("#myPic").height() gives the wrong value when first called. 调试之后，我开始意识到$("#myPic").height()在首次调用时给出了错误的值。 In fact its value is equal to that of $(window).outerHeight() . 实际上，它的值等于$(window).outerHeight() 。
I tried adding a 1 second delay when calling the function for the first time and it seemed to do the trick. 第一次调用该函数时，我尝试添加1秒的延迟，这似乎可以解决问题。
So.. 所以..
My main question (based on my findings so far -- details above) 我的主要问题 （根据迄今为止的发现-上面的详细信息）
How is it that when my Django website is deployed on NGinx+Gunicorn, the window.onload event doesn't work properly? 当我的Django网站部署在NGinx + Gunicorn上时， window.onload事件无法正常工作怎么办？ This problem thus causes the $("#myPic").height() function to not give the right value when executed for the first time. 因此，此问题导致$("#myPic").height()函数在首次执行时未给出正确的值。 (but for some reason it works perfectly fine on localhost). （但是由于某种原因，它在localhost上可以正常工作）。
How should I go about fixing this? 我应该如何解决这个问题？
Thanks :-) 谢谢 ：-）
1 个解决方案
解决方案1
0 已采纳 2016-09-07 09:22:02
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (eg images) also has been loaded. ready事件在HTML文档已加载之后发生，而onload事件在稍后又加载了所有内容（例如图像）时发生。 Now i think you got the trick. 现在，我认为您已掌握窍门。 It sometime works in local because, in local there may not be much difference between onload and ready .But in production, ready will call first than onload . 它有时在本地工作，因为在本地， onload和ready之间可能没有太大区别。但是在生产中， ready将比onload首先onload 。 For you what happens is after onload function, inside that function you are defining ready . 对于您来说，发生在onload函数之后，在该函数内部您定义了ready 。 So after onload there is no chance to execute ready function 因此，在onload之后，没有机会执行ready函数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.