javascript块脚本执行

阻止脚本执行的唯一方法是使用一个循环,该循环还将锁定大多数浏览器,并阻止与网页的任何交互。

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

也就是说,我认为您应该考虑在不锁定浏览器的情况下实现目标的方法。

如果您不介意进行预处理,请尝试 Narrative Javascript ,你可以

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

这个建议不完全是你要求的,但我提供了一个可能的替代方案。

使用要使用的背景图像创建一个CSS类。当应用程序启动时,将这个CSS类分配给一个DIV,该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;
   }
}

可以使用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。这个 图像 对象是不需要的,我只是假设这就是您想要加载它的方式。但关键是,如果Ajax完成,那么图像将完全下载到浏览器的缓存中。因此,图像也可供 图像 对象。

这确实假定该映像具有对缓存友好的HTTP头。否则,它的行为可能在不同的浏览器中有所不同。