AJAX async set to false block the page, otherwise can not get the value

AJAX async set to false block the page, otherwise can not get the value

I'm using an ajax request inside im.js so it will call my PHP server from
the js and get the feedback. However, I need to update an variable based
on the callback of the .ajax function like this:
var picture = "<img src='https://www.123.com/pictures/unknown.jpg'
width='30' />";
$.ajax({'type':'GET',
'async':false,'url':'https://www.123.com/site/getpic?username=' +
username,
'success':function(callback){
picture = "<img src='" + callback + "' width='30' />";
} //ajax success
}); //ajax
See that if i delete "async: false", the variable picture will not be
updated since ajax is async, and if I disable it like this, it blocks the
whole page from going on even I load the whole im.js async.
Please help: How can I update the variable, in the meantime, do not block
the page?
Thanks