Как задержать js код, пока код с стороннего сервиса не загрузиться полностью?

Question

[rinaz22]

Всем привет! Есть код стороннего сервиса, который грузиться не очень быстро. Даже когда страница полностью загружается, то элементы этого сервиса все еще загружаются.
Есть js код, который связан с кодом этого сервиса. Но вот он не выполняется, т.к. код сервиса грузиться после того, как выполняется тот js код. Как сделать так, чтобы js код ждал полной загрузки элементов того сервиса?

Answer 1

[shmatuan]

Собственно событие которое ждёт загрузку всего
+ проверьте что не стоит async в <script>

window.addEventListener('load', () => {
    console.log('All assets are loaded')
})

Comments

[rinaz22]

'load'

что это такое?

[shmatuan]

rinaz22, Указывается событие, которое нужно отлавливать в addEventListener
В данном случае событие load, которое вызывается после загрузки всего DOM, картинок, скриптов

[rinaz22]

shmatuan, вывел вот это:
All assets are loaded
Но элементы с стороннего сайта не загрузились полностью, а это слово уже вышло

[shmatuan]

rinaz22, Лучше скинь что грузишь - будет проще понять

[rinaz22]

shmatuan, https://moneycaptcha.ru/captcha.php

[shmatuan]

rinaz22, Пока только смог найти почему он так не работает - он сам начинает работу с этой же функции window.onload=function(){ ...

[shmatuan]

rinaz22, как вариант проверять загрузку через

var check = function() {
  if(NAME) { /* делать то что нужно */  }
  else { setTimeout(() => { check() }, 1000) }
}

[rinaz22]

shmatuan, пробовал вывести alert, чтобы проверить, но не выводится

Answer 2

[Андрей Седышев]

Загружайте внешний скрипт из js примерно таким образом:

var loadScriptAsync = function(uri) {
    return new Promise((resolve, reject) => {
        var tag = document.createElement('script');
        tag.src = uri;
        tag.async = true;
        tag.onload = () => {
            resolve();
        };
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    });
}

var scriptLoaded = loadScriptAsync('external-script.js');

Ну, и далее:

scriptLoaded.then(function(){
  //код для выполнения после загрузки внешнего скрипта
});

Источник: https://medium.com/@vschroeder/javascript-how-to-e...

Comments

[rinaz22]

Пробовал вывести alert, чтобы проверить, но он запустился сразу же

[Андрей Седышев]

rinaz22, уберите блок <script src="https://moneycaptcha.ru/captcha.php"> из вашего html - теперь он будет вставляться из js-скрипта.

[rinaz22]

Андрей, я убрал

[Андрей Седышев]

rinaz22, только что проверил у себя, алерт отрабатывает только после загрузки внешнего скрипта. Возможно, он у вас закешировался браузером, или просто интернет быстрый.

[rinaz22]

Андрей, пробовал в режиме инкогнито, все равно не работает.
Про интернет это шутка или нет?) Скорость среднее 40Мбит/с

[Андрей Седышев]

rinaz22, ну, смотрите, даже гифку записал - алерт выскакивает только поле загрузки captcha.php.

[rinaz22]

Андрей, а почему же у меня не работает?

[rinaz22]

Андрей, все, наконец-то!
Может кому пригодится, вот код:

test();
function test() {
	var n = $("#MoneyCaptcha_load_preloader-wrapper").css("display");

	if(n == 'none'){
		//тут код, который должен выполнятся после загрузки
	}else{
		setTimeout(() => { test() }, 1000)
	}
}