How to make an animated sliced smiley load faster and completly without refreshing the page

Question

I am developing a Php chat system and i have added some animated smileys that are supposed to be replaced by a code just like in any normal chat. In order for the smileys to load faster, i have used Photoshop to slice them into pieces and when the user types in the chat code, i replace that code with the sliced html code.

Problem When the user types the code for a smiley for the first time, it does not load faster so it breaks the image and load per slice . So the user must refresh the page before he can see how the image really looks like.

How can i make the sliced images load faster without refreshing the page just like Facebook stickers ?

So the first image the user sees looks like this print screen of the image but in animated way

Instead of this Image animated

And this is how the sliced animated image looks like normally with the code

<table id='Table_01' width='160' height='160' border='0' cellpadding='0' cellspacing='0'   class='smileys_table'>
    <tr>
        <td>
 <img src='ojm_chat/images/ojm_smile_loose_teeth_01.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_02.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_03.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_04.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_05.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_06.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_07.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_08.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_09.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_10.gif' width='16' height='16' alt='' style='display:block'></td>
    </tr>
    <tr>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_11.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_12.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_13.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_14.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_15.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_16.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_17.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_18.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_19.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_20.gif' width='16' height='16' alt='' style='display:block'></td>
    </tr>
    <tr>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_21.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_22.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_23.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_24.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_25.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_26.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_27.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_28.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_29.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_30.gif' width='16' height='16' alt='' style='display:block'></td>
    </tr>
    <tr>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_31.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_32.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_33.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_34.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_35.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_36.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_37.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_38.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_39.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_40.gif' width='16' height='16' alt='' style='display:block'></td>
    </tr>
    <tr>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_41.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_42.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_43.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_44.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_45.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_46.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_47.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_48.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_49.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_50.gif' width='16' height='16' alt='' style='display:block'></td>
    </tr>
    <tr>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_51.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_52.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_53.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_54.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_55.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_56.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_57.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_58.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_59.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_60.gif' width='16' height='16' alt='' style='display:block'></td>
    </tr>
    <tr>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_61.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_62.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_63.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_64.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_65.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_66.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_67.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_68.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_69.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_70.gif' width='16' height='16' alt='' style='display:block'></td>
    </tr>
    <tr>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_71.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_72.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_73.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_74.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_75.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_76.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_77.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_78.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_79.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_80.gif' width='16' height='16' alt='' style='display:block'></td>
    </tr>
    <tr>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_81.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_82.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_83.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_84.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_85.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_86.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_87.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_88.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_89.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_90.gif' width='16' height='16' alt='' style='display:block'></td>
    </tr>
    <tr>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_91.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_92.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_93.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_94.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_95.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_96.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_97.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_98.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_99.gif' width='16' height='16' alt='' style='display:block'></td>
        <td>
            <img src='ojm_chat/images/ojm_smile_loose_teeth_100.gif' width='16' height='16' alt='' style='display:block'></td>
    </tr>
</table>

Answer 1

I am quite sure the image won't load any faster by cutting it up into small pieces. The browser will have to make multiple requests to the server, most probably resulting in slower performance than loading the full image at once.

Instead, preload your image(s). There are a number of ways to do this (some explained here), but a basic JavaScript version is shown below:

<html>
<head>
    <script language = "JavaScript">
        var baseUrl = "http://usefaith.voiedusucces.net/ojm_chat/";

        function preloadImages()
        {
            var image = new Image();
            var imageNames = [
                "ojm_smile_loose_teeth.gif",
                "ojm_smile_another_one.gif"
            ];

            for (i = 0; i < imageNames.length; i++) {
                image.src = baseUrl + imageNames[i];
            }
        }

        function showSmiley(imageName)
        {
            var smileyElement = document.createElement('img');
            smileyElement.src = baseUrl + imageName;
            document.body.appendChild(smileyElement);
        }
    </script>
</head>

<body onLoad="javascript:preloadImages()">
    <a href="javascript:showSmiley('ojm_smile_loose_teeth.gif')">
        Add loose teeth smiley
    </a> |
    <a href="javascript:showSmiley('ojm_smile_another_one.gif')">
        Add some other smiley
    </a> |
</body>
</html>