How to stop jCarousel before datas are finished load from a php file?

index.php file

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 3,
    visible: 12
    });
});
</script>

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
  <li>I love you haha.</li>
  <li>I love you haha.</li>
  <li>I love you haha.</li>
</ul>

---------------------------------------------------------------------------
From the above code, I use firebug to inspect the 3 <li>, each of them has the following properties :

<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical" style="float: left; list-style: none outside none; height: 19px;" jcarouselindex="1">I love you haha.</li>

<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-2 jcarousel-item-2-vertical" style="float: left; list-style: none outside none; height: 59px;" jcarouselindex="2">I love you haha.</li>

<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-3 jcarousel-item-3-vertical" style="float: left; list-style: none outside none; height: 99px;" jcarouselindex="3">I love you haha.</li>

So we know that the functions inside jcarousel.min.js file is assign those class, style and jcarouselindex to the <li>.[

-----------------------------------------------------------------------------
Now I need to dynamic get <li> from a php file.
usermessage.php file

echo "<li>I love you. Haha.</li>";
echo "<li>I love you. Haha.</li>";
echo "<li>I love you. Haha.</li>";

------------------------------------------------------------------------------
Then I added the following codes onto previous index.php file :

<?php $username1"=zac1987"; ?>
<script type="text/javascript">
function goer() {
var str="<?php echo $username1; ?>";
if (str=="")
  {
  document.getElementById("mycarousel").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("mycarousel").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","usermessage.php?username="+str,true);
xmlhttp.send();
}

goer();
</script>

When index.php is loaded, it will call javascript function goer() to get the 3 <li> from usermessage.php file.

------------------------------------------------------------------------------
Now I use firebug to inspect the 3 <li> again, then I realize the 3 <li> don't have class, style and jcarouselindex anymore. I guess it is because the function inside jcarousel.min.js file is execute first before the 3 <li> are finish sent from usermessage.php file. How to stop jcarousel funtion before 3 <li> is finish loaded? I saw there is an example of the way to stop jcarousel function but it is for xml data, I don't know how to convert it to php. I hope somebody can help me out about this. Below is the example of the way to stop jcarousel function but it is for xml data :

<script type="text/javascript">
function mycarousel_initCallback(carousel, state)
{
    // Lock until all items are loaded. That prevents jCarousel from
    // setup correctly and we have to do that in the ajax callback
    // function with carousel.setup().
    // We're doing that because we don't know the exact height of each
    // items until they are added to the list.
    carousel.lock();

    jQuery.get(
        'special_textscroller.php',
        {
            'feed': 'http://jquery.com/blog/feed/atom/'
        },
        function(xml) {
            mycarousel_itemAddCallback(carousel, xml);
        },
        'xml'
    );
};

function mycarousel_itemAddCallback(carousel, xml)
{
    var $items = jQuery('item', xml);

    $items.each(function(i) {
        carousel.add(i + 1, mycarousel_getItemHTML(this));
    });

    carousel.size($items.size());

    // Unlock and setup.
    carousel.unlock();
    carousel.setup();
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    return '<h3><a href="'+$('link', item).text()+'">'+$('title', item).text()+'</a></h3><p>'+mycarousel_truncate($('description', item).text(), 90)+'</p>';
};

/**
 * Utility function for truncating a string without breaking words.
 */
function mycarousel_truncate(str, length, suffix) {
    if (str.length <= length) {
        return str;
    }

    if (suffix == undefined) {
        suffix = '...';
    }

    return str.substr(0, length).replace(/\s+?(\S+)?$/g, '') + suffix;
};

jQuery(document).ready(function() {
    /**
     * We show a simple loading indicator
     * using the jQuery ajax events
     */
    jQuery().ajaxStart(function() {
        jQuery(".jcarousel-clip-vertical").addClass('loading');
    });

    jQuery().ajaxStop(function() {
        jQuery(".jcarousel-clip-vertical").removeClass('loading');
    });

    jQuery('#mycarousel').jcarousel({
        vertical: true,
        size: 0,
        initCallback: mycarousel_initCallback
    });
});
</script>