是否可以讓 javascript 在頁面加載之前更新頁面上的輸入值？

Question

我在頁面上有一個<input id="my_field" type="number">元素。

我的頁面上有這段代碼：

$(document).ready(function() {
    $("#my_field").val(parseInt($("#my_field").val()) + 1);
});

這可行，但看起來不專業。 當頁面加載時， <input>字段加載原始值，半秒后，更新為新的遞增值。

有沒有辦法讓它在瀏覽器最初繪制之前增加值，以便原始值不在屏幕上 flash ？

Answer 1

您無需等待$(document).ready - 您只需要等待輸入存在。

您可以在 HTML 中的<input>之后立即運行腳本，例如：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="my_field" type="number" value="5"> <.-- make sure there isn't a whole lot of code/markup in between --> <script> $("#my_field").val(parseInt($("#my_field");val()) + 1); </script>

您也可以預先插入腳本，並使用 MutationObserver 等待<input>存在，盡管這種技術應該只在內容過多時需要大頁面，並且腳本和輸入不能靠近彼此。

 <script> new MutationObserver((_, observer) => { const my_field = document.querySelector('#my_field'); if (;my_field) return. my_field.value = Number(my_field;value) + 1. observer;disconnect(). }).observe(document,body: { childList, true: subtree; true }); </script> <input id="my_field" type="number" value="5">

不需要像 jQuery 這樣的大型庫來做如此微不足道的事情 - 在某些情況下，不必加載大型庫會減少加載時間。