Firebase/JS - Запустить огонь JavaScript перед загрузкой страницы?

В настоящее время я делаю сценарий JavaScript, который извлекает данные пользователя из базы данных реального времени.

/* Fetch User Data from Firebase */

function userInfo() {
    var username;
    var usertype;
    var barangay;

    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        var userId = firebase.auth().currentUser.uid;
        return firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
        username = (snapshot.val() && snapshot.val().name) || 'Unknown';
        barangay = (snapshot.val() && snapshot.val().barangay) || 'Unknown';

        document.getElementById('fullname').innerHTML = username; //Sets the username in the Webpage. 
        });
      } else {
        window.location.replace("../index.html"); //redirect
      }
    });
  }
  window.onload = userInfo();

window.onload = userInfo(); — это код, который я сейчас использую для запуска скрипта при загрузке страницы, но это приводит к задержке обновления данных в innerHTML. (Пример: содержимое <p id='fullname'> — «ИМЯ ПОЛЬЗОВАТЕЛЯ», и оно будет обновлено с помощью «имени пользователя», полученного из сценария.). Я попытался разместить файлы JS поверх страницы с тем же результатом.

Мой вопрос будет заключаться в том, есть ли способ заставить этот скрипт запускать ПЕРВЫЙ до загрузки страницы? Или есть более эффективный способ справиться с этим скриптом?

🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.


709
2

Ответы:

Теоретически запрос сработает (асинхронно) до загрузки DOM, если вы поместите скрипт в тег head. Однако вы не знаете, сколько времени потребуется, прежде чем запрос будет выполнен. Может даже провалиться.

Мое предложение состояло бы в том, чтобы дать клиенту какую-то обратную связь о том, что информация загружается (т.е. показать индикатор прогресса). Есть бесчисленное множество статей, написанных о том, как вы можете подойти к этому.

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


Вы смешиваете асинхронные и синхронизирующие функции... Я не знаю вашей архитектуры, но предполагая, что у вас есть только эта страница, просто оберните встроенный скрипт, и он должен работать без window.onload

<script>
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        var userId = firebase.auth().currentUser.uid;
        return firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
        username = (snapshot.val() && snapshot.val().name) || 'Unknown';
        barangay = (snapshot.val() && snapshot.val().barangay) || 'Unknown';

        document.getElementById('fullname').innerHTML = username; //Sets the username in the Webpage. 
        });
      } else {
        window.location.replace("../index.html"); //redirect
      }
    });
</script>

проблема с этим подходом заключается в том, что ваша страница не будет загружаться до тех пор, пока обещание не будет разрешено, и это может занять много времени (и также не удастся), что не очень хорошо для вашего взаимодействия с пользователем. Как уже упоминалось, у вас есть разные способы решения этой проблемы, один из них — Веб-работник.