[英]Javascript block script execution
我需要做这样的事情:
我知道最简单的方法是在图像的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
话虽如此,我认为您应该在不锁定浏览器的情况下研究实现目标的方法。
如果您不介意进行预处理步骤,请尝试使用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。 不需要Image
对象,我只是假设你想要加载它。 关键是,如果ajax完成,那么图像将完全下载到浏览器的缓存中。 因此,图像也可供Image
对象使用。
这确实假设图像与缓存友好的http标头一起提供。 否则,它的行为可能会因不同的浏览器而异。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.