Блог

У меня есть lt;input id="my_field" type="number"gt; элемент на странице.

У меня есть этот код на моей странице:

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

Это работает, но выглядит непрофессионально. При загрузке страницы lt;inputgt; поле загружается с исходным значением, а через полсекунды обновляется до нового, увеличенного значения.

Есть ли какой-либо способ увеличить значение до его первоначального отображения браузером, чтобы исходное значение не отображалось на экране?

Вам не нужно ждать $(document).ready — вам нужно только дождаться появления входных данных.

Вы можете запустить скрипт вскоре после lt;inputgt; того, как в HTML, например:

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

Вы также можете вставить сценарий заранее и использовать сервер MutationObserver для ожидания lt;inputgt; его существования, хотя этот метод должен потребоваться только для больших страниц, когда содержимого слишком много, а сценарий и ввод не могут быть расположены близко друг к другу.

 lt;scriptgt; new MutationObserver((_, observer) =gt; {  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 }); lt;/scriptgt; lt;input id="my_field" type="number" value="5"gt; 

Нет необходимости требовать большую библиотеку, такую как jQuery, чтобы сделать что — то настолько тривиальное-отсутствие необходимости загружать большую библиотеку в некоторых случаях сократит время загрузки.