Javascript bloquer l'exécution du script

J'ai besoin de faire quelque chose comme ceci:

  • Exécuter un morceau de code
  • Commencer à charger une image et de bloquer l'exécution de script
  • Lorsque l'image est chargée de reprendre l'exécution
  • Exécuter le reste du code

Je sais que le plus simple est d'attribuer une fonction à l'événement onload de l'image, puis d'exécuter le reste du code dans la fonction, mais si c'est possible je veux avoir un "linéaire" le comportement de blocage de l'exécution du script et de le reprendre ensuite.
Alors, est-il une manière de croix-navigateur pour ce faire?

OriginalL'auteur mck89 | 2010-02-17

  1. 3

    La seule façon de bloquer l'exécution du script est d'utiliser une boucle, ce qui permettra également de verrouiller la plupart des navigateurs et de prévenir toute interaction avec votre page web.

    Firefox, Chrome, Safari, Opera et IE tous l'appui de la complete de la propriété, qui a été normalisée en HTML5. Cela signifie que vous pouvez utiliser un while boucle d'arrêter l'exécution du script jusqu'à ce que l'image a fini le téléchargement.

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

//script continues after image load

    Cela étant dit, je pense que vous devriez chercher des façons d'atteindre votre objectif, sans bloquer le navigateur.

    Je suis d'accord que c'est une mauvaise façon, mais je pense aussi que c'est le seul moyen. Peut-être que je peux donner à l'utilisateur la possibilité de choisir entre le blocage de l'exécution du script et appeler la fonction de chargement lorsque l'image est chargée.
    J'ai du mal à croire que c'est le seul moyen. Je peux honnêtement dire que je n'ai jamais rencontré une situation en JavaScript qui nécessite de verrouiller le script; il y a toujours un moyen (comme temporairement les fonctions de remplacement) de faire les choses de manière asynchrone. Vous êtes dans le contrôle du script sur votre page, après tout. Vous pourriez peut-être poster une autre question d'aller dans plus de détails sur votre problème?
    Le complete propriété existe pour Gecko et IE et peut fonctionner dans d'autres navigateurs aussi. Si vous êtes en insistant sur le blocage de l'exécution du script, voir ma mise à jour.
    Ouais je pense que je vais utiliser quelque chose comme cela merci pour votre aide.

    OriginalL'auteur Andy E

  2. 1

    Si vous ne me dérange pas d'avoir une étape de prétraitement, essayez Récit Javascript, que vous pouvez

    image.onload = new EventNotifier();
image.onload.wait->();
    C'est un grand projet, mais je suis en train de construire une application simple en pur javascript...et je ne sais rien à propos de Java:)
    Après le prétraitement, vous obtenez un pur Javascript.
    Oui, je sais, mais je préfère utiliser javascript
    À partir de ce que je peux dire, tout Récit JavaScript n'est crée les rappels pour vous. Il n'arrête pas l'exécution du script (parce que les autres parties du script peut toujours être exécuté).
    Si vous pensez que l'OP veut une vérification de la boucle (while(!image.loaded){})?

    OriginalL'auteur kennytm

  3. 1

    Cette suggestion n'est pas exactement ce que vous avez demandé, mais je vous l'offre comme une alternative possible.

    Créer une classe CSS avec, en arrière-plan de l'image que vous souhaitez utiliser. Lorsque votre application démarre, attribuer cette classe CSS à un élément DIV qui est soit cachée de site ou de taille moyenne à zéro par zéro pixels. Cela permettra de s'assurer que l'image est chargée à partir du serveur. Lorsque vous voulez charger l'image (étape deux ci-dessus), utilisez la classe CSS que vous créez; ce qui va arriver rapidement. Peut-être assez vite que vous n'avez pas besoin de bloquer le code ultérieure de l'exécution?

    Oui cela pourrait être une bonne préchargement méthode pour les images mais je ne suis pas le chargement de l'image au début de l'application.
    Je comprends, mais si vous avez créé une classe CSS avec un background-image attribut, assigné en classe à un mannequin de la DIV, vous SERAIT le chargement de l'image au début de l'application.

    OriginalL'auteur Upperstage

  4. 1

    Je ne voudrais pas essayer de bloquer l'exécution du script complètement, car cela pourrait rendre le navigateur de ralentir, voire d'alerte à l'utilisateur qu'un script est trop long à exécuter.

    Ce que vous pouvez faire est de "linéariser" votre code en utilisant des événements pour terminer le travail. Vous aurez besoin d'ajouter de la fonction, l'image peut ne jamais charger.

    Exemple:

    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;
   }
}
    Êtes-vous sûr que vous pouvez arrêter l'exécution avec setTimeout?
    Cela n'arrête pas l'exécution du code, il vous permet d'attendre jusqu'à ce que l'image est fait, le chargement avant de vous faire plus de travail. Vous 'stop' de faire votre propre code d'exécution en déplaçant votre code restant dans le finishWork fonction.

    OriginalL'auteur FlashXSFX

  5. 1

    Vous pouvez utiliser xmlhttprequest et de l'utilisation en mode synchrone. 

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

    L'astuce ici est de nous charger de la même image deux fois, d'abord par l'aide de la Image objet, et aussi par l'utilisation d'ajax en mode synchrone. Le Image objet n'est pas nécessaire, j'ai juste supposé que c'est la façon dont vous voulez charger. La clé, c'est que si l'ajax est terminée, l'image est entièrement téléchargé un dans le cache du navigateur. Ainsi, l'image sera également disponible pour une utilisation par le Image objet.

    Ceci signifie que l'image est servi avec cache amicale des en-têtes http. Sinon, c'est le comportement peut varier dans les différents navigateurs.

    OriginalL'auteur goat