Question

非常抱歉我的英语，我有一个问题。

$("#MainPicture").attr("src", url);
CenterImg();

在第1行代码完成后，

需要执行第2行代码。它是异步的，我想通过同步执行代码。谢谢大家。

问题详情; 我想在加载图片时在中心屏幕上移动$（“＃MainPicture”）。就像这样。

$("#MainPicture").attr("src", url);
// new picture width,not old picture width
var PictureWidth=$("#MainPicture").width();
var ScreenWidth=$(window).width();
var ResultWidth=(ScreenWidth-PictureWidth)/2;
$("#MainPicture").css("left",ResultWidth);

实际上，在第2行代码中，我总是得到旧图片宽度。

Answer 1

$("#MainPicture").attr("src", url).one('load', CenterImg );

function CenterImg() {
    var PictureWidth = $("#MainPicture").width();
    var ScreenWidth = $(window).width();
    var ResultWidth = (ScreenWidth - PictureWidth) / 2;
    $("#MainPicture").css("left", ResultWidth);
}

这使用one()^[docs]方法添加load处理程序，它只是绑定处理程序，并在第一次执行后解除绑定。

在这种情况下，处理程序是您的CenterImg()函数，因此在图像加载完成后将调用它。

如果图像有可能被缓存，并且您仍然希望调用该函数，则可以执行以下操作：

$("#MainPicture").attr("src", url)
                 .one('load', CenterImg )
                 .filter(function() { return this.complete; })
                 .load();

function CenterImg() {
    var PictureWidth = $("#MainPicture").width();
    var ScreenWidth = $(window).width();
    var ResultWidth = (ScreenWidth - PictureWidth) / 2;
    $("#MainPicture").css("left", ResultWidth);
}

这样，如果图像已经加载，this.complete将返回true，filter()^[docs]方法将返回带有该图像的jQuery对象，因此您可以手动调用{{1}处理程序。

如果图片不尚未完成加载，.load()将返回.filter()个元素，手册0将无法生效。

Answer 2

您不希望它是同步的，您希望能够在右侧异步点运行您的功能。

$("#MainPicture").load(CenterImg).attr("src", url);

jquery同步执行

2 个答案: