Question

TL; DR。主要问题在底部。

我已经创建了一个django网站，并希望动态地将图像填入div标签。这是我写的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"));
       })
     }

在HTML中我有一个ID为myPic的图像嵌套在div中。添加我也使用Bootstrap v3可能很有用。

我以两种方式调用上述函数：

window.onload = changeBGSize;
<body onresize="changeBGSize();">

当我使用python manage.py runserver在本地主机上部署网站时，网站运行正常，图片按照我的意愿居中。

但问题是当我将它部署到我的DigitalOcean Droplet时。我的droplet是一台linux ubuntu 14机器，使用Gunicorn和Nginx来提供静态文件。出于某种原因，上面的JQuery函数在加载屏幕时不起作用，但是在通过onresize事件调用时它可以工作。

经过调试后，我意识到$("#myPic").height()在第一次调用时给出了错误的值。实际上它的值等于$(window).outerHeight()的值。

我第一次调用该函数时尝试添加1秒的延迟，似乎可以解决这个问题。

所以..

我的主要问题（根据我迄今为止的调查结果 - 详情见上文）

当我的Django网站部署在NGinx + Gunicorn上时，window.onload事件无法正常工作？因此，此问题导致$("#myPic").height()函数在第一次执行时不能给出正确的值。（但出于某种原因，它在localhost上完全正常）。

我该如何解决这个问题？

谢谢： - ）

Answer 1

在加载HTML文档后发生ready事件，而在加载所有内容（例如图像）后发生onload事件。现在我觉得你有把戏。它有时在本地工作，因为在本地，onload和ready之间可能没有太大区别。但在制作中，ready将首先调用onload。对于你来说，在onload函数之后发生了什么，在你定义ready的函数中。因此，在onload之后，没有机会执行ready函数

使用Gunicorn / Nginx部署Django站点时的JS / Jquery问题（在DigitalOcean上）

1 个答案: