jQuery .load（function）同步

同步使用jQuery加载函数的最佳方法是什么？

我需要加载图像，但在加载图像之前无法执行下一行代码。

我可以循环变量，直到负载完成，但是想知道是否有更好的方法。

var img = jQuery('').load(function () { }); //Run code here once img load has comlpeted. 

Answer 1

据我所知， load事件将始终异步触发，除非图像已经缓存（在某些浏览器中）。 唯一可靠的解决方案是将代码放入回调中。 但是，要确保在所有浏览器中始终触发load处理程序，即使图像已缓存，请确保在设置图像的src属性之前添加处理程序。

Answer 2

您还可以使用CallBack函数来获取同步行为 –

 var result = $('#main-container').load( 'html/Welcomeform.html', function () { if($("textarea").find("#mail-id")){ $("textarea#mail-id").val(email_id); } } ); 

Answer 3

 var img = jQuery('').load(runner); function runner() { //run code here once image is loaded } 

Answer 4

我到这里寻找类似的解决方案。 从读取开始，无法使用.load，您需要使用AJAX请求，正如问题注释所指出的那样。

在我的情况下，我需要加载一个html文件，我已经添加了一个转换来更改内容。 即使我在加载回调中显示内容，旧的内容也会在转换之后显示在新内容之前。

 var main = $("#main"); main.load("about.html", displaySection); function displaySection () { main.show('blind'); } 

我的解决方法是运行转换，显示超时函数内的加载内容，延迟参数为200。

 var main = $("#main"); main.load("about.html", displaySection); function displaySection () { setTimeout(function() { main.show('blind'); }, 200); } 

问题可能是如果连接速度太慢以至于新页面加载时间超过200毫秒，但在这种情况下我想知道稍后将启动回调。 我不明白为什么没有超时工作我感觉很难看，但它解决了我的问题…以防万一其他人没有考虑过这种可能性。

Answer 5

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! */ } }); });