javascript - javascript同步执行

Question

我是 javascript 新手并尝试使用滑块。我的问题类似于下面的问题 jquery .attr() with callback？. 如果流程是同步的，不应该延迟显示直到源完全加载而不是显示旧图像

$('.container').fadeOut(100, function(){
     console.log("before");
     $('.container > img').attr('src', 'image src');
     $('.container').show();
     console.log("after");
 });

在加载新图像之前，我可以在控制台中看到这两个日志。任何人都可以解释一下...如果问题很幼稚，请原谅我试图掌握这个概念。

Answer 1

在您调用 的那一刻$('.container > img').attr('src', 'image src');，将向服务器发出请求以加载图像。加载图像需要时间，因此会延迟。

但如果你仔细观察，这条线完美地执行了。您在图像加载之前看到控制台条目的原因是因为图像需要时间来加载

Answer 2

使用 .load 事件侦听器，该侦听器将在加载图像时触发

$('.container > img').attr('src', 'image src').load(function(){
  $('.container').show();
});

Answer 3

javascript是同步的，但是问题是设置src属性和显示图片不一样。设置 src 后，调度浏览器开始加载图像，然后继续执行脚本。如果您希望在加载图像后执行代码，则必须将调用附加到图像的 onload 事件。

在 jQuery 中使用 load 函数：

$('.container > img').attr('src', 'image src').load(function(){
   // Stuff to do after the image has been loaded
});