Javascript escritura del bloque de ejecución

Question

Necesito hacer algo como esto:

• Ejecutar una pieza de código
• de inicio para cargar una imagen y bloquear la ejecución del script
• Cuando la imagen se carga de reanudación de la ejecución
• Ejecutar el resto del código

sé que la forma más sencilla es asignar una función en el proceso de carga de la imagen de una Luego, ejecute el resto del código en la función, pero si es posible, quiero tener un comportamiento "lineal" que bloquee la ejecución del script y luego reanudarlo. Entonces, ¿hay una forma de navegador cruzado para hacer esto?

Answer 1

La única manera de bloquear la ejecución del script es utilizar un bucle, que también encerrar a la mayoría de los navegadores y prevenir cualquier interacción con su página web.

Firefox, Chrome, Safari, Opera e IE todos admiten la propiedad complete, que finalmente se estandarizó en HTML5. Esto significa que puede usar un bucle while para detener la ejecución del script hasta que la imagen haya terminado de descargarse.

var img = new Image(); 
img.src = "/myImage.jpg"; 
document.body.appendChild(img); 
while (!img.complete) 
{ 
    // do nothing... 
} 

// script continues after image load 

Dicho esto, creo que debe buscar formas de lograr su objetivo sin bloquear el navegador.

Answer 2

Si no te importa tener un paso de procesamiento previo, tratar Narrative Javascript, que se puede

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

Answer 3

Esta sugerencia no es exactamente la que usted solicitó, pero la ofrezco como una posible alternativa.

Crea una clase de CSS con la imagen de fondo que deseas usar. Cuando se inicia la aplicación, asigne esta clase de CSS a un DIV que esté oculto fuera del sitio o tenga un tamaño de cero por cero píxeles. Esto asegurará que la imagen se cargue desde el servidor. Cuando desee cargar la imagen (paso dos arriba), use la clase CSS que cree; esto sucederá rápidamente ¿Tal vez lo suficientemente rápido como para no bloquear la siguiente ejecución del código?

Answer 4

No intentaría bloquear la ejecución de scripts por completo, ya que eso podría ralentizar el navegador o incluso alertar al usuario de que un script tarda demasiado en ejecutarse.

Lo que puede hacer es "linealizar" su código mediante el uso de eventos para terminar el trabajo. Tendrá que agregar un tiempo de espera a la función, ya que la imagen puede que nunca se cargue.

Ejemplo:

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

Puede utilizar xmlhttprequest y utilizar el modo sincrónico.

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

El truco aquí es cargamos la misma imagen dos veces, primero utilizando el objeto Image, y también por el uso de AJAX en modo síncrono. El objeto Image no es necesario, simplemente asumí que así es como quieres cargarlo. Sin embargo, la clave es que si se completa ajax, la imagen se descargará por completo y se guardará en el caché del navegador. Como tal, la imagen también estará disponible para su uso en el objeto Image.

Esto supone que la imagen se sirve con encabezados http compatibles con caché. De lo contrario, su comportamiento puede variar en diferentes navegadores.