healer
Администратор
Из: Москва
Сообщения: 24467
|
 |
Асинхронная загрузка javascript |
|
Послано: 09-07-2015 10:27 |
|
|
В том месте страницы, где нужно реально отобразить наш элемент создаем пустой div блок:
<div id="script_block" class="script_block"></div>
В самом конце страницы перед </body> вставляем скрипт для асинхронной загрузки файлов:
<div id="script_ad" class="script_ad" style="display:none;">
Здесь любой файл или скрипт, который нужно загрузить.
</div>
<script type="text/javascript">
// переместить его в реальную позицию отображения
document.getElementById('script_block').appendChild(document.getElementById('script_ad'));
// показать
document.getElementById('script_ad').style.display = 'block';
</script>
В самых старых версиях IE (6 и ниже) асинхронная загрузка к сожалению не работает,
но таких пользователей уже практически нет.
Все остальные браузеры и сервисы успешно пользуются современной ускоренной загрузкой web-страниц.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
 |
Асинхронная загрузка javascript |
|
Послано: 09-07-2015 14:39 |
|
|
Этот текст взят отсюда.
Там же можно найти еще много интересного.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Асинхронная загрузка javascript |
|
Послано: 20-07-2015 06:50 |
|
|
Еще один вариант - вставлять скрипты через DOM:
document.createElement('script')..., что работает так же как async:
такой скрипт выполняется полностью независимо от страницы и от других скриптов — сам ничего не ждёт и ничего не блокирует.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Асинхронная загрузка javascript |
|
Послано: 21-07-2015 07:02 |
|
|
Более полный пример
var el_head = document.getElementsByTagName('head').item(0);
var new_script = document.createElement('script');
new_script.setAttribute('type', 'text/javascript');
new_script.setAttribute('src', 'http://celitel.info/js/my.js');
el_head.appendChild(new_script);
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Асинхронная загрузка javascript |
|
Послано: 21-07-2015 07:23 |
|
|
Скрипты, которые созданы и добавлены динамически, асинхронные по-умолчанию,
они не блокируют отрисовку и выполняются сразу после загрузки.
Для HTML 5 можно отменить асинхронность.
new_sсript.async = false;
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Асинхронная загрузка javascript |
|
Послано: 22-07-2015 09:52 |
|
|
Если формировать sсript и помещать в head, то может возникнуть проблема, связанная с тем, что неизвестно в какой момент внешний скрипт будет загружен и могут быть выполнены функции в нем объявленные.
Обычно это решается таким образом, что в начале внешнего файла скриптов следуют функции, а затем осуществляется их вызов.
Т е внешний скрипт файл решает свои изолированнве от других скриптов задачи.
function aaa(){
.....
}
function bbb(){
.....
}
.....
aaa();
В других случаях можно воспользоваться событием onload для определения момента загрузки файла
function require(file,callback){
var head=document.getElementsByTagName("head")[0];
var script=document.createElement('script');
script.src=file;
script.type='text/javascript';
//real browsers
script.onload=callback;
//Internet explorer
script.onreadystatechange = function() {
if (_this.readyState == 'complete') {
callback();
}
}
head.appendChild(script);
}
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
