我<input id="my_field" type="number">在頁面上有一個元素。
我的頁面上有這個代碼：
$(document).ready(function() {
$("#my_field").val(parseInt($("#my_field").val()) 1);
});
這有效，但看起來不專業。當頁面加載時，該<input>欄位以原始值加載，半秒后，更新為新的遞增值。
有沒有辦法讓它在瀏覽器最初繪制之前增加值，以便原始值不會在螢屏上閃爍？
uj5u.com熱心網友回復：
您不需要等待$(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 這樣的大庫來做一些微不足道的事情——在某些情況下，不必加載一個大庫會減少加載時間。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/365889.html
標籤：javascript 查询