jQuery .load (function) synchronous

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

var img = jQuery('<img src="' + url + '"/>').load(runner); 
function runner() { 
    //run code here once image is loaded 
} 

Answer 3

Вы также можете использовать функцию CallBack для получения синхронного поведения -

var result = $('#main-container').load('html/Welcomeform.html', 
       function() { 
        if($("textarea").find("#mail-id")){ 
         $("textarea#mail-id").val(email_id); 
        } 
        }); 

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