在Gunicorn/Nginx(在DigitalOcean上）上部署Django站点时出现JS/Jquery问题

JS/Jquery issue when deploying Django site on with Gunicorn/Nginx (on DigitalOcean)

本文关键字：JS 问题 Jquery 站点 部署 Nginx Gunicorn DigitalOcean Django      更新时间：2023-09-26

TL；博士。底部的主要问题

我做了一个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中，我有一个嵌套在div中的ID为myPic的图像。补充一下我也在使用Bootstrap v3可能会很有用。

我用两种方式调用上面的函数：

  1. 主JS中的window.onload = changeBGSize;
  2. HTML中的<body onresize="changeBGSize();">

当我使用python manage.py runserver在本地主机上部署网站时，网站运行良好，图片居中。

但问题是当我把它部署到我的DigitalOcean液滴上时。我的飞沫是一台linux ubuntu 14机器，使用Gunicorn和Nginx来提供静态文件。由于某些原因，上面的JQuery函数在加载屏幕时不起作用，但在通过onresize事件调用时起作用。

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

当我第一次调用该函数时，我尝试添加1秒的延迟，结果似乎成功了。

所以。。

我的主要问题(基于我迄今为止的发现——以上详细信息(

为什么当我的Django网站部署在NGinx+Gunicorn上时，window.onload事件无法正常工作？因此，这个问题导致$("#myPic").height()函数在第一次执行时没有给出正确的值。(但由于某些原因，它在本地主机上运行得非常好(。

我该怎么着手解决这个问题？

感谢：-(

ready事件发生在HTML文档加载之后，而onload事件发生在稍后，此时所有内容(如图像(也已加载。现在我想你明白了。它有时在本地工作，因为在本地onload和ready之间可能没有太大区别。但在生产中，ready会比onload先调用。对您来说，发生在onload函数之后，在该函数中您定义了ready。因此，在onload之后，就没有机会执行ready函数

相关文章：