jQuery .load(function) 同步
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15975331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .load(function) synchronous
提问by JIbber4568
What is the best way to use the jQuery load function synchronously.
同步使用 jQuery 加载功能的最佳方法是什么。
I need to load an image but can't execute the next line of code until that image has loaded.
我需要加载一个图像，但在加载该图像之前无法执行下一行代码。
I could loop a variable until the load has completed but was wondering if there was a better way of doing that.
我可以循环一个变量直到加载完成，但想知道是否有更好的方法来做到这一点。
var img = jQuery('<img src="' + url + '"/>').load(function () {
});
//Run code here once img load has comlpeted.
回答by plalx
From what I know, the loadevent will always fire asynchronously, except if the image is already cached (in some browsers). The only reliable solution is to put the code in a callback like you did. However, to make sure the loadhandler will always be fired in all browsers, even if the image is cached, make sure to add the handler beforesetting the srcproperty of the image.
据我所知，该load事件将始终异步触发，除非图像已被缓存（在某些浏览器中）。唯一可靠的解决方案是像您一样将代码放入回调中。但是，要确保load处理程序始终在所有浏览器中触发，即使图像已缓存，请确保在设置src图像属性之前添加处理程序。
回答by Aparajita
You can also use CallBack function to get Synchronous Behaviour -
您还可以使用 CallBack 函数来获取同步行为 -
var result = $('#main-container').load( 'html/Welcomeform.html',
function () {
if($("textarea").find("#mail-id")){
$("textarea#mail-id").val(email_id);
}
} );
回答by zarazan
var img = jQuery('<img src="' + url + '"/>').load(runner);
function runner() {
//run code here once image is loaded
}
回答by manou
I arrived here looking for a similar solution. From the reads, it is not possible with .load, you need to use an AJAX request, as the question comment points out.
我来到这里寻找类似的解决方案。从读取结果来看，.load 是不可能的，您需要使用 AJAX 请求，正如问题注释所指出的那样。
In my case I need to load a html file and I have added a transition to change the content. The old content were showed before the new one after the transition even if I was showing the content inside the load callback.
在我的情况下，我需要加载一个 html 文件，并且我添加了一个转换来更改内容。即使我在加载回调中显示内容，旧内容也会在转换后显示在新内容之前。
var main = $("#main");
main.load("about.html", displaySection);
function displaySection () {
main.show('blind');
}
My workaround has been to run the transition that shows the loaded content inside a timeout function with a of 200 for the delay parameter.
我的解决方法是运行在超时函数中显示加载内容的转换，延迟参数的值为 200。
var main = $("#main");
main.load("about.html", displaySection);
function displaySection () {
setTimeout(function() {
main.show('blind');
}, 200);
}
The problem could be if the connection is so slow that the new page takes more than 200 ms to load, but in this case I wonder the callback will be launched later on. I don't understand why is not working without the timeout that I feel quite ugly, but it solved my problem ... just in case any other has not given a thought on this possibility.
问题可能是连接速度太慢以至于新页面加载时间超过 200 毫秒，但在这种情况下，我想知道稍后会启动回调。我不明白为什么没有超时就不能工作，我觉得很丑，但它解决了我的问题......以防万一其他人没有考虑过这种可能性。
回答by Dan185
The callback function in load() will fire once the basic elements of the screen have been retrieved, (the actual html) but doesn't wait for images to finish, you can use this to make it wait.
load() 中的回调函数将在检索到屏幕的基本元素（实际 html）后触发，但不会等待图像完成，您可以使用它来等待。
$('#holder').load(function() {
var imgcount = $('#holder img').length;
$('#holder img').load(function(){
imgcount--;
if (imgcount == 0) {
/* now they're all loaded, let's display them! */
}
});
});
