Как подгрузить внешний js скрипт после загрузки всей страницы?

Question

[miron-partner]

У меня есть код от тизирной системы, который мне нужно вставить на страницу сайта.

Div в котором будут выводится тизеры:
<div id="spcad_44">загрузка...</div>

И код который подтягивает тизеры с сервера тизерной системы (втавляется перед <\/body>):

<script type="text/javascript">
document.write('<scr'+'ipt language="javascript" type="text/javascript" src="site.ru/output/index/44"></scr'+'ipt>');
</script>

Вот как выглядит документ, который генерирует тизерка и который подтягивается кодом выше (https://site.ru/output/index/44):

if(typeof jQuery == 'undefined') {
			var script = document.createElement('script');
			script.type = 'text/javascript';
			script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
			document.getElementsByTagName('head')[0].appendChild(script);
			script.addEventListener('load', function(){
			jQuery(document).ready(function() {
			jQuery('#spcad_43').html('<style>#wrapper_43 {background: ;max-width: 800px; padding: 0px 7px 7px 7px ; margin: 0px; outline: 0px solid #000;}#wrapper_43 ul {list-style-type: none; padding: 0px; margin: 0px; height: 100%;}#wrapper_43 ul li {padding-top: 7px;}.tizdiv_img_43 {float: left; padding-right: 5px;}#wrapper_43 img { padding: 0px; margin: 0px; outline: 0px solid #000;  max-height: 80px; max-width: 80px;}.tizdiv_a_43 { text-align: left; }#wrapper_43 ul li a {color: #000; font-size: 14px; text-decoration: none; font-style: normal; font-weight: normal}#wrapper_43 ul li a:hover {color: #000; text-decoration: none}#wrapper_43 .tizdiv_a_addit_43 a { color: #000; text-decoration: none; font-style: normal; font-weight: normal;}#wrapper_43 .tizdiv_a_addit_43 a:hover { color: #000; text-decoration: none; }</style><div id=\"wrapper_43\"><ul><li><div class=\"tizdiv_a_43\"><a href=\"https://site.ru/click/60/43\" title=\"читать далее >>\" target=\"_blank\">МужÑкой тизер 2</a></div></li><div style=\"clear: left;\"></div><li><div class=\"tizdiv_a_43\"><a href=\"https://site.ru/click/59/43\" title=\"читать далее >>\" target=\"_blank\">МужÑкой тизер 1</a></div></li><div style=\"clear: left;\"></div></ul></div>');
			    jQuery(".closeblock").on('click', function () {
                    jQuery(this).parents(".pure-g").remove();
                });
			});
			}, false);
			} else
			{
			jQuery('#spcad_43').html('<style>#wrapper_43 {background: ;max-width: 800px; padding: 0px 7px 7px 7px ; margin: 0px; outline: 0px solid #000;}#wrapper_43 ul {list-style-type: none; padding: 0px; margin: 0px; height: 100%;}#wrapper_43 ul li {padding-top: 7px;}.tizdiv_img_43 {float: left; padding-right: 5px;}#wrapper_43 img { padding: 0px; margin: 0px; outline: 0px solid #000;  max-height: 80px; max-width: 80px;}.tizdiv_a_43 { text-align: left; }#wrapper_43 ul li a {color: #000; font-size: 14px; text-decoration: none; font-style: normal; font-weight: normal}#wrapper_43 ul li a:hover {color: #000; text-decoration: none}#wrapper_43 .tizdiv_a_addit_43 a { color: #000; text-decoration: none; font-style: normal; font-weight: normal;}#wrapper_43 .tizdiv_a_addit_43 a:hover { color: #000; text-decoration: none; }</style><div id=\"wrapper_43\"><ul><li><div class=\"tizdiv_a_43\"><a href=\"https://site.ru/click/60/43\" title=\"читать далее >>\" target=\"_blank\">МужÑкой тизер 2</a></div></li><div style=\"clear: left;\"></div><li><div class=\"tizdiv_a_43\"><a href=\"https://site.ru/click/59/43\" title=\"читать далее >>\" target=\"_blank\">МужÑкой тизер 1</a></div></li><div style=\"clear: left;\"></div></ul></div>');
                jQuery(".closeblock").on('click', function () {
                    jQuery(this).parents(".pure-g").remove();
                });
			}

Все работает хорошо. Но тизеры при таком варианте запрашиваются в процессе построения DOM.

Вопрос: как сделать так, чтоб тизеры генерировались после закгрузки страницы, а точней по какому-то событию, к примеру по нажатию на определенную кнопку? Либо перегенерировались (обновлялись) по нажатию на другую кнопку

Answer 1

[Dutt Dett]

Можно добавить задержку для скрипта, условно 5000, и по прошествии этого времени скрипт сам будет подгружаться.

Comments

[miron-partner]

Если не сложно конкретно кодом подскажите:

Вот код, подключения скрипта изначальный с подключением перед закрывающим body:

<script type="text/javascript">
document.write('<scr'+'ipt language="javascript" type="text/javascript" src="site.ru/output/index/44"></scr'+'ipt>');
</script>

А вот кусок моего скрипта, внутри которого по событию (нажатие на кнопку), должно происходить подключение верхнего скрипта:

document.querySelector('.button').onclick = function(){
	// Как правильно на JS это подключение здесь реализовать?
}

Answer 2

[scottparker]

а script defer не подходит?

Comments

[miron-partner]

Если не сложно кодом js изложите свою мысль.

[scottparker]

miron-partner, https://learn.javascript.ru/script-async-defer
скрипт с атрибутом defer выполняется после загрузки дом-дерева

Answer 3

[Максим К]

Вот тут есть варианты https://ru.stackoverflow.com/questions/688566/%D0%...