文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在不刷新页面的情况下更快、更完整地加载动画切片笑脸

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

Stack Overflow用户
提问于 2015-02-13 10:58:07
回答 1查看 110关注 0票数 0

我正在开发一个Php聊天系统，我添加了一些动画笑脸，应该被代码替换，就像在任何正常的聊天中一样。为了让笑脸更快地加载，我已经使用Photoshop将它们切片，当用户在聊天代码中键入时，我将该代码替换为切片的html代码。

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

如何使切片图像加载得更快，而不像Facebook贴纸一样刷新页面?

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

而不是这个形象动画

这就是在代码中切片的动画图像的样子。

代码语言：javascript
复制
<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>
photoshop
php
html
image
EN

回答 1

Stack Overflow用户

发布于 2015-02-13 12:49:02

我非常肯定，图像不会加载任何更快的切割成小块。浏览器将不得不向服务器发出多个请求，很可能导致性能比一次加载完整映像慢。

相反，预先加载您的图像。有许多方法可以做到这一点(一些解释了这里)，但基本的JavaScript版本如下所示：

代码语言：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>
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/28498040

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档