Question

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

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

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

var img = jQuery('<img src="' + url + '"/>').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('<img src="' + url + '"/>').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

一旦检索到屏幕的基本元素（实际的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! */ 
} 
}); 
});

jQuery .load（function）同步

5 个答案: