我需要做类似于这样的事情:
- 执行一段代码
- 开始加载一个图像并阻止脚本执行
- 当图像加载完毕后,恢复执行
- 执行剩下的代码
我知道最简单的方法是在图像的 onload 事件上分配一个函数,然后在函数中执行其余的代码,但如果可能的话,我希望有一种“线性”行为来阻止脚本执行,然后恢复它。那么,是否有一种跨浏览器的方法来实现这个呢?
我需要做类似于这样的事情:
我知道最简单的方法是在图像的 onload 事件上分配一个函数,然后在函数中执行其余的代码,但如果可能的话,我希望有一种“线性”行为来阻止脚本执行,然后恢复它。那么,是否有一种跨浏览器的方法来实现这个呢?
唯一阻止脚本执行的方法是使用循环,这也会锁定大多数浏览器并防止与您的网页进行任何交互。
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
话虽如此,我认为你应该寻找在不锁定浏览器的情况下实现目标的方法。
我不会尝试完全阻止脚本执行,因为这可能会使浏览器变慢,甚至会提示用户脚本执行时间过长。
你可以通过使用事件来完成工作来“线性化”你的代码。你需要在函数中添加一个超时,因为图像可能永远无法加载。
例如:
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。 Image
对象不是必需的,我只是假设这是您想要加载它的方式。关键在于,如果ajax完成,则图像将完全下载并在浏览器缓存中。因此,该图像也可供Image
对象使用。image.onload = new EventNotifier();
image.onload.wait->();
while(!image.loaded){}
) 吗? - kennytm这个建议不完全符合您的要求,但我提供它作为可能的替代方案。
创建一个带有所需背景图片的CSS类。当您的应用程序启动时,将此CSS类分配给一个DIV,该DIV要么被隐藏在视线之外,要么大小为零像素。这将确保从服务器加载图像。当您想要加载图像(如上面的第二步)时,请使用您创建的CSS类;这将快速发生。也许足够快,您无需阻止后续代码执行?
complete
属性适用于 Gecko 和 IE,也可能适用于其他浏览器。如果您坚持阻止脚本执行,请查看我的更新。 - Andy E