Выполнение сценария блока JavaScript
Я должен сделать что-то вроде этого:
- Выполните часть кода
- Начните загружать изображение и блокировать выполнение сценария
- Когда изображение загружается, возобновляют выполнение
- Выполните остальную часть кода
Я знаю, что самый простой путь состоит в том, чтобы присвоить функцию на onload событии изображения и затем выполнить остальную часть кода в функции, но если возможно, что я хочу иметь "линейное" поведение, блокирующее выполнение сценария и затем возобновить его. Так, есть ли перекрестный браузер способ сделать это?
5 ответов
Единственный способ заблокировать выполнение сценария - использовать цикл, который также заблокирует большинство браузеров и предотвратит любое взаимодействие с вашей веб-страницей.
Firefox, Chrome, Safari, Opera и IE все поддерживают свойство complete , которое, наконец, было стандартизировано в HTML5. Это означает, что вы можете использовать цикл while , чтобы остановить выполнение скрипта до тех пор, пока изображение не завершит загрузку.
var img = new Image();
img.src = "/myImage.jpg";
document.body.appendChild(img);
while (!img.complete)
{
// do nothing...
}
// script continues after image load
При этом, я думаю, вам следует подумать о способах достижения своей цели, не блокируя браузер.
Это предложение не совсем то, о чем вы просили, но я предлагаю его как возможную альтернативу.
Создайте класс CSS с фоновым изображением, которое вы хотите использовать. Когда ваше приложение запускается, назначьте этот класс CSS для DIV, который либо скрыт за пределами сайта, либо имеет нулевой размер с нулевым размером пикселей. Это обеспечит загрузку изображения с сервера. Если вы хотите загрузить изображение (шаг два выше), используйте созданный вами класс CSS; это произойдет быстро. Может быть, достаточно быстро, чтобы вам не нужно было блокировать последующее выполнение кода?
Я бы не стал полностью блокировать выполнение сценария, поскольку это может замедлить работу браузера или даже предупредить пользователя о том, что выполнение сценария занимает слишком много времени.
Что вы можете сделать, так это «линеаризовать» свой код, используя события для завершения работы. Вам нужно будет добавить тайм-аут к функции, так как изображение может никогда не загрузиться.
Пример:
var _img = null;
var _imgDelay = 0;
var _finished = false;
function startWork(){
_img = document.createElement('img');
_img.onload = onImgLoaded;
_img.src = 'yourimg.png';
// append img tag to parent element here
// this is a time out function in case the img never loads,
// or the onload event never fires (which can happen in some browsers)
imgTimeout();
}
function imgTimeout(){
if (_img.complete){
// img is really done loading
finishWork();
}
else{
// calls recursively waiting for the img to load
// increasing the wait time with each call, up to 12s
_imgDelay += 3000;
if (_imgDelay <= 12000){ // waits up to 30 seconds
setTimeout(imgTimeout, _imgDelay);
}
else{
// img never loaded, recover here.
}
}
}
function onImgLoaded(){
finishWork();
}
function finishWork(){
if (!_finished){
// continue here
_finished = true;
}
}
Вы думаете, что это слишком сложно:
ksort($arrTags);
arsort($arrTags);
Теперь массив отсортирован так, как вы хотите.
-121--2102898-Можно использовать xmlhttprequest и синхронный режим.
var url = "image.php?sleep=3";
var img = new Image;
var sjax = new XMLHttpRequest();
img.src = url;
sjax.open("GET", url, false);
sjax.send(null);
alert(img.complete);
Хитрость в том, что мы загружаем одно и то же изображение дважды, сначала с помощью объекта Image , а также с помощью ajax в синхронном режиме. Объект Image не нужен, я просто предположил, что вы хотите загрузить его именно так. Однако ключ заключается в том, что если ajax завершит, то изображение будет полностью загружено в кэш браузера. Таким образом, изображение также будет доступно для использования объектом Image .
Предполагается, что образ обслуживается с понятными для кэша заголовками http. В противном случае поведение может различаться в разных браузерах.
Если вы не против шага предварительной обработки, попробуйте Narrative Javascript, который вы можете
image.onload = new EventNotifier();
image.onload.wait->();