執行javascript之前的延遲

-1

我正在使用以下javascipt動態地居中文本。執行javascript之前的延遲

$(function() { 
    $('.centre-dyn').css({ 
     'position' : 'absolute', 
     'left' : '50%', 
     'top' : '50%', 
     'margin-left' : function() {return -$(this).outerWidth()/2}, 
     'margin-top' : function() {return -$(this).outerHeight()/2} 
    }); 
});

但是，當我加載頁面時，文本在快速居中之前會出現在其未預先確定的位置。我怎樣才能讓文字立即居中？

來源

2016-08-17 Louis C.

使用Flex純CSS，而不是JS代碼。 – SLaks

爲什麼不爲此設置CSS規則而不是使用JavaScript？ – j08691

爲什麼你不使用CSS的樣式？ – randominstanceOfLivingThing

一個選項與Aurora0001鏈接，隱藏內容然後在JS運行後顯示。另一種方法是在HTML元素後面添加腳本標記。所以你不需要的文件準備好，它會立即運行：

<div class="centre-dyn"></div> 
<script> 
    $('.centre-dyn').css({ 
     'position' : 'absolute', 
     'left' : '50%', 
     'top' : '50%', 
     'margin-left' : function() {return -$(this).outerWidth()/2}, 
     'margin-top' : function() {return -$(this).outerHeight()/2} 
    }); 
</script>

提供的jQuery

頭標記加載或文檔中這點在什麼地方，應該很好地工作。但我真的會建議在CSS中這樣做，而不是按照評論。

來源

2016-08-17 17:33:15 agmcleod

$(function(){})是簡寫或$(document).ready();一旦文檔準備就緒，您的代碼就會執行，而不是立即執行。正如其他人所提到的那樣：使用CSS會更有意義，並且可以立即集中。

例如：

.centre-dyn { 
position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%); 
}

來源

2016-08-17 17:33:33 Pat

執行javascript之前的延遲

回答

相關問題