Javascript блок сценария выполнения

Question

мне нужно сделать что-то вроде этого:

• Execute кусок кода
• Start, чтобы загрузить изображение и блокировать выполнение скрипта
• При загрузке изображения возобновить выполнение
• Выполнить остальную часть кода

Я знаю, что самый простой способ, чтобы назначить функцию на OnLoad случае изображения а Затем выполните оставшуюся часть кода в функции, но если возможно, я хочу, чтобы «линейное» поведение блокировало выполнение скрипта, а затем возобновило его. Итак, есть ли кросс-браузерный способ сделать это?

Answer 1

Единственный способ блокировать выполнение скрипта, чтобы использовать цикл, который будет также запереть большинство браузеров и предотвратить любое взаимодействие с вашей веб-страницей.

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 

Это, как говорится, я думаю, вы должны взглянуть на способы достижения своей цели, не заперев браузер.

Answer 2

Если вы не против того, шаг предварительной обработки, попробуйте Narrative Javascript, который вы можете

image.onload = new EventNotifier(); 
image.onload.wait->(); 

Answer 3

Это предложение не совсем то, что вы просили, но я предлагаю его в качестве возможной альтернативы.

Создайте класс CSS с фоновым изображением, которое вы хотите использовать. Когда начнется ваше приложение, присвойте этому классу CSS DIV, который либо скрыт за пределами сайта, либо будет равен нулю нулевым пикселям. Это обеспечит загрузку изображения с сервера. Когда вы хотите загрузить изображение (шаг два выше), используйте созданный класс CSS; это произойдет быстро. Может быть, достаточно быстро, что вам не нужно блокировать последующее выполнение кода?

Answer 4

Я бы не стал полностью блокировать выполнение сценария, так как это может заставить браузер замедлить работу или даже предупредить пользователя о том, что сценарий слишком долго выполняется.

Что вы можете сделать, это «линеаризовать» ваш код, используя события для завершения работы. Вам нужно будет добавить тайм-аут функции, так как изображение никогда не загрузится.

Пример:

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; 
    } 
} 

Answer 5

Вы можете использовать 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. В противном случае поведение может различаться в разных браузерах.