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中使用加载函数：

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

javascript同步执行

3 个答案: