jQuery preload large image with % loaded progress update

Question

I have a rather large world map image at about 900k. I'd like to show loading text with live % completed, like "Loading Map 33%". I know the code I have below is obviously wrong. Any ideas how to correctly achieve this?

 $(function(){
    var map_image = $("#world_map_img"),
        imgPercent = (100 / map_image.length),
        curPercent = 0
    map_image.on('load',function(){
        curPercent += imgPercent;
        $(".img_load_percent").text(Math.round(curPercent));
        $(".loader").hide()
        map_image.animate({"opacity":"1.0"}, 1000)
    });
});