Как загрузить функцию после того, как ajax загрузит все элементы DOM
У меня проблема с функцией, которую нужно загрузить после того, как весь контент будет готов. У меня есть массивный вызов ajax на 1700 строк кода.
Файл Как работает мой код: php получает данные из 3 таблиц в моей базе данных и конвертирует их в JSON. Я открываю файл JSON и создаю 1 элемент для 1 результата базы данных.
На данный момент у меня около 100 результатов, но на последнем этапе будет около 1000. Итак, я создаю загрузку, чтобы поместить ее перед загрузкой страницы. Но поскольку основной контент создается js, иногда моя загрузка исчезает за 1-2 секунды до загрузки контента. Я могу использовать js или jquery. Пока что я использовал что-то вроде этого:
$(window).on ('load', function (){
setTimeout(function (){
$("#loading").fadeOut('slow');}, 1000)});
Да, можно, но ... несколько раз, когда страница была протестирована, загрузка скрывается до того, как ajax создаст элементы dom, поэтому в течение 1 секунды у нас была пустая страница
о, так что вы ждете завершения AJAX - вы не ПОКАЗЫВАете никакого ajax в коде вопроса ... ajax обычно имеет обратный вызов успеха - делайте то, что вам нужно в этом
Да, обычно ... Я использую ajax для чтения файла ... так что мой код выглядит очень похожим var xhttp = new XMLHttpRequest (); xhttp.onreadystatechange = function () {if (this.readyState == 4 && this.status == 200) {здесь мой код}}; xhttp.open ("ПОЛУЧИТЬ", "somefile.php", истина); xhttp.send (); }
как насчет того, чтобы показать, что в вопросе, где это а) имеет смысл и б) читается
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Выполните функцию, как только вы получили данные через AJAX. Проверьте фрагмент кода ниже
$.ajax({
url: '/URL/TO/CODE',
headers: {
'X-CSRF-TOKEN': $('meta[name = "csrf-token"]').attr('content') //This is optional if you are using x-csrf-token validation of if u want to pass any header data
},
type: "post",
data: {
data:data //In case if you need to pass any data
},
dataType: 'json',
cache: false,
before:function(){
//Is you want to show any loader or anything while ajax is being executed.
},
success: function (response) {
//Once your ajax is success you can call your custom function to do things with the data
myCustomFunction();
},
error: function (res) {
console.info(res);
}
});
function myCustomFunction(){
//This to be executed when all data are filled by ajax and page is loaded
}
Надеюсь это поможет.
Да, это поможет другим с подобной проблемой. но я не уверен, где использовать в моем коде ajax: var xhttp = new XMLHttpRequest (); xhttp.onreadystatechange = function () {if (this.readyState == 4 && this.status == 200) {Здесь мой код}}; xhttp.open ("ПОЛУЧИТЬ", "ajax_file.php", истина); xhttp.send (); }
используйте его в My code goes here - обратите внимание, вы пометили свой вопрос jquery, поэтому для предполагать естественно использовать jquery ajax - поэтому важно опубликовать код, который имеет отношение к вашему вопросу в вопросе
Я знаю. Но я не знал, что мне нужно будет поместить такую функцию внутри вызова ajax ... так что могу я поставить ее после xmlhttp.send (); ?
$(window).ready(function (){
setTimeout(function(){ $("#loading").fadeOut('slow'); }, 3000);
});
Пожалуйста, отформатируйте свой ответ и дайте более подробное объяснение.
Этот мне совершенно не поможет. Вы просто меняете тайм-аут. На будущее нужно знать, что все зависит от подключения пользователя к Интернету.
чего именно вы ждете? window.onload (по сути то, что вы делаете) срабатывает после загрузки страницы - зачем вам ждать дольше, если вы хотите дождаться загрузки окна?