show Loading effect in jquery UI tooltip

Question

I have tooltip which is being displayed on hover of a image, The content of tooltip is the larger version hovered image..

Problem: The image in tooltip loads slowly.. How can I display loader until image doesn't loads in Tootip?

<img id="small-img" title= "<img id='big-img' src=<?=getResizedImage(imageId, 500);?>>" src="<?= getResizedImage(imageId, 150); ?>" />

Answer 1

I solved the issue by moving the contents of 'title' to other DIV ('tooltip-contents')..

Below is my fix which shows a div inside tooltip.

//Image to be hovered to show Tooltip
<img id="small-img" src="<?= getImage(imageId, 150); ?>" />

//Contents to be displayed in Tooltip.
<div id="tooltip-contents" style="display:none;">
    <img src='<?= getImage(imageId, 500); ?>'/>
</div>

//Contents of .js
$('#small-img').attr('title', function(){
    return $('#tooltip-contents').html();
});

$("#small-img").tooltip({
    options : {
        content : function() {
            return $(this).prop('title');;
        }
    }
});

Answer 2

I would wrap the image with a container and add a background-image for the `container.
If I understood right your img-big will be shown in tooltip?