在Gunicorn / Nginx上部署Django站點時出現JS / Jquery問題（在DigitalOcean上）

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; 在主要的JS中
HTML中的<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

ready事件在HTML文檔已加載之后發生，而onload事件在稍后又加載了所有內容（例如圖像）時發生。 現在，我認為您已掌握竅門。 它有時在本地工作，因為在本地， onload和ready之間可能沒有太大區別。但是在生產中， ready將比onload首先onload 。 對於您來說，發生在onload函數之后，在該函數內部您定義了ready 。 因此，在onload之后，沒有機會執行ready函數

在Gunicorn / Nginx上部署Django站點時出現JS / Jquery問題（在DigitalOcean上）

問題描述

1 個解決方案

解決方案1
0 已采納 2016-09-07 09:22:02

在Gunicorn / Nginx上部署Django站點時出現JS / Jquery問題（在DigitalOcean上）

問題描述

1 個解決方案

解決方案1 0 已采納 2016-09-07 09:22:02

解決方案1
0 已采納 2016-09-07 09:22:02