JS załadowany asynchronicznie w ciele utrzymuje przeglądarkę w trybie "ładowania".

Question

Ładuję niektóre JS z zewnętrznego źródła tuż przed moim znacznikiem </body>. Eksperymentuję, aby zobaczyć, co się stanie, jeśli serwer zawiesi się podczas próby obsługi tego JS innej firmy. Wygląda na to, że wszystko na mojej stronie działa dobrze, ale przeglądarka wciąż obraca się tak, jakby strona wciąż się ładowała. Czy istnieje sposób na załadowanie tego javascript w taki sposób, że przeglądarka nie będzie czekać na to, aby zadeklarować, że strona jest w pełni załadowana?

Dla porównania, próbowałem dwóch następujących metod, aby załadować moje JS asynchronicznie:

<script> 
    var resource = document.createElement('script'); 
    resource.src = "https://myserver.com/js/myjs.js”; 
    var script = document.getElementsByTagName('script')[0]; 
    script.parentNode.insertBefore(resource, script); 
</script> 

i

<script async src="https://myserver.com/js/myjs.js"></script> 

Answer 1

odpowiedź zebrana z komentarzy powyżej i moje własne eksperymenty:

Po załadowaniu strony trzeciej JS po zakończeniu reszty strony zakończy się ładowanie, a przeglądarka wyrenderuje stronę tak, jakby była całkowicie załadowana, nawet jeśli zasób zewnętrzny się zawiesił. Jednym ze sposobów osiągnięcia tego jest załadowanie JS w ramach window.setTimeout z czasem oczekiwania większym niż standardowy czas wczytywania strony.

Podczas ładowania zewnętrznego JS za pomocą funkcji JS zamiast standardowego znacznika skryptu, pamiętaj, że jeśli masz jakiekolwiek atrybuty data-, należą one do obiektu resource.dataset.

Tak więc, w powyższym przykładzie,

<script async data-my-data="someData" src="https://myserver.com/js/myjs.js"></script> 

staje

<script> 
    window.setTimeout(function() { 
     var resource = document.createElement('script'); 
     resource.dataset.myData = "someData"; 
     resource.src = "https://myserver.com/js/myjs.js"; 
     var script = document.getElementsByTagName('script')[0]; 
     script.parentNode.insertBefore(resource, script); 
    }, 5000); 
</script> 

Należy pamiętać, że 5000 jako limit czasu pracuje dla mnie, ponieważ moi strona ładuje się w dobrze poniżej 5 sekund, a ja nie potrzebuję JS, który ładuję w ciągu pierwszych 5 sekund. Jeśli potrzebujesz wcześniej lub Twoja strona wymaga więcej czasu, musisz dostosować ten numer. Ponadto, jak wspomniano powyżej @adeneo, innym sposobem na osiągnięcie tego samego byłoby załadowanie js przez ajax później.

Answer 2

można załadować js przez getscript, sprawdź to demo