Question

我正在开发一个Php聊天系统，我添加了一些动画表情符号应该被代码替换，就像在任何正常的聊天中一样。为了让表情加载速度更快，我使用Photoshop将它们分成几部分，当用户输入聊天代码时，我用切片的html代码替换该代码。

问题当用户第一次键入笑脸代码时，它的加载速度不会快，因此会破坏图像并加载每个切片。因此，用户必须先刷新页面才能看到图像的真实外观。

如何在不刷新Facebook贴纸的情况下更快地加载切片图像？

因此，用户看到的第一张图片看起来像print screen of the image，但是以动画方式

这就是切片动画图像通常使用代码

的样子

<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

我很确定通过将图像切割成小块，图像不会加载得更快。浏览器必须向服务器发出多个请求，最有可能导致性能降低，而不是一次加载完整图像。

相反，预加载您的图像。有很多方法可以做到这一点（一些解释here），但基本的JavaScript版本如下所示：

<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>

Answer 2

另一种方法是只使用像Facebook这样的css sprites只会在这里加载你的gif图像并在你想要的任何地方使用它们。您将需要的只是图像的尺寸，并将它们放在宽度和高度都写的位置

在css文件中定义css样式，如下所示

<style>
    #teeth {
    width: 81px;
    height: 61px;
    display: inline-block; /* Display icon as inline block */
    background: url(http://usefaith.voiedusucces.net/ojm_chat/ojm_smile_loose_teeth.gif) 0 0;
}


#another_image {
    width: 160px;
    height: 160px;
    background: url(http://usefaith.voiedusucces.net/ojm_chat/another_image.gif) 0 0;
}



    </style>

现在，在您的代码中，每次键入代码以显示笑脸时，您都会执行此类操作

<div id="teeth"></div>

    <div id="another_image"></div>

基本上，如果您复制并粘贴我刚写的代码，它将显示两个图像。只要id在那里，你也可以使用span或其他东西代替div。

More about css sprinte

如何在不刷新页面的情况下更快更完整地制作动画切片笑脸

2 个答案: