javascript - jQuery .load(function) 同步

Question

同步使用jQuery加载功能的最佳方法是什么。

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

我可以循环一个变量，直到加载完成，但想知道是否有更好的方法来做到这一点。

var img = jQuery('<img src="' + url + '"/>').load(function () {                 

            });  
  //Run code here once img load has comlpeted.                                              

Answer 1

您还可以使用回调函数来获取同步行为 -

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

Answer 2

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

Answer 3

var img = jQuery('<img src="' + url + '"/>').load(runner);  
function runner() {
    //run code here once image is loaded
}

Answer 4

一旦检索到屏幕的基本元素（实际的 html），load() 中的回调函数将触发，但不等待图像完成，您可以使用它使其等待。

$('#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! */ 
} 
}); 
});

Answer 5

我来到这里寻找类似的解决方案。从读数来看，.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 毫秒，但在这种情况下，我想知道稍后会启动回调。我不明白为什么没有我觉得很丑陋的超时就无法工作，但它解决了我的问题......以防万一其他人没有考虑过这种可能性。