如何在不刷新页面的情况下更快、更完整地加载动画切片笑脸-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

487683

文章

249181231

访问

+关注

分类

暂无分类

日期归档

暂无数据

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

发布于2022-09-24 14:16 阅读(1138) 评论(0) 点赞(15) 收藏(2)

我正在开发一个 PHP 聊天系统，并且我添加了一些动画笑脸，这些笑脸应该被代码替换，就像在任何普通聊天中一样。为了让表情符号加载得更快，我使用 Photoshop 将它们切片，当用户输入聊天代码时，我用切片的 html 代码替换该代码。

问题当用户第一次输入笑脸代码时，它不会加载得更快，因此会破坏图像并按切片加载。所以用户必须刷新页面才能看到图像的真实样子。

我怎样才能让切片图像加载更快而不像 Facebook 贴纸一样刷新页面？

所以用户看到的第一张图片看起来像这个图像的打印屏幕，但是以动画的方式

而不是这个图像动画

这就是切片动画图像在代码中的正常外观

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

解决方案

我很确定将图像切成小块不会更快地加载。浏览器将不得不向服务器发出多个请求，这很可能导致性能比一次加载完整图像要慢。

相反，请预加载您的图像。有很多方法可以做到这一点（一些在这里解释），但基本的 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>