JQuery синхронное выполнение

Question

Очень извините за мой английский, у меня проблема.

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

необходимо выполнить код строки 2 после завершения кода строки 1.это асинхронный, и я хочу, чтобы код исполнялся синхронно.Спасибо всем.

Подробности вопроса;я хочу переместить $ ("# 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);
}

Это добавляет обработчик load с использованием метода one() ^{[документы]} , который просто связывает обработчик и отменяет привязку после первого раз это выполняется.

Обработчик в этом случае является вашей 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 с этим изображением, чтобы вы могли вручную вызывать ваш обработчик .load().

Если изображение имеет , а не , но еще не завершило загрузку, .filter() вернет 0 элементов, и руководство load() не будет иметь никакого эффекта.

Answer 2

Вы не хотите, чтобы оно было синхронным, вы хотите иметь возможность запускать вашу функцию в асинхронной точке right .