如何在不刷新页面的情况下更快，更完整地加载动画切片笑脸
[英]How to make an animated sliced smiley load faster and completly without refreshing the page
问题描述
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. 
我正在开发一个Php聊天系统，并且添加了一些动画笑脸，这些笑脸应该像任何普通聊天一样被代码替换。 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. 为了使笑脸更快加载，我使用了Photoshop将它们切成薄片，当用户键入聊天代码时，我用切成html的代码替换了该代码。
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 ? 我如何才能使切片的图像更快地加载而无需像Facebook贴纸一样刷新页面？
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>
2 个解决方案
解决方案1
3 2015-02-13 12:49:02
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: 有很多方法可以做到这一点（ 这里有一些解释），但是下面显示了一个基本的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>
解决方案2
0 已采纳 2015-02-13 21:30:33
Another way of doing this is to use only css sprites like Facebook does only that here you will load your gif images and use them in your script anywhere you want. 做到这一点的另一种方法是仅使用css精灵，就像Facebook所做的那样，在这里您将加载gif图像，并在您想要的任何位置的脚本中使用它们。 All you will need will be the dimensions of your images and put them at the place where it is written width and height 您所需要的只是图像的尺寸，并将它们放在书写宽度和高度的位置
Define a css styles in your css file like this 像这样在您的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>
Now in your code, every time a code is typed to display a smiley you do something like this 现在在您的代码中，每次键入代码以显示笑脸时，您都可以执行以下操作
<div id="teeth"></div>
<div id="another_image"></div>
Basically if you copy and paste the code i just wrote, it will display the two images. 基本上，如果您复制并粘贴我刚刚编写的代码，它将显示两个图像。 Instead of div you can also use span or something else as long as the id is there. 除了ID，您也可以使用span或其他名称。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在不使用ajax刷新页面的情况下提交div加载？ - how to make a div load on submit without refreshing the page using ajax?
Ajax / jQuery-如何显示新元素并将页面加载到容器中而不完全重新加载整个页面？ - Ajax/jQuery - How to display new elements and load a page into a container without completly reloading the whole page?
如何使此php页面加载速度更快 - How to make this php page load faster
DataTable：如何加快页面加载？ - DataTable : How to make a page load faster?
在同一页面上加载表格而无需刷新 - load form at the same page without refreshing
加载更多而不刷新页面[Wordpress] - Load more without refreshing page [Wordpress]
如何使图像加载更快？ - How to make images load faster?
刷新而不刷新整个页面 - make refresh without refreshing the all page
如何在不刷新整个页面的情况下将数据加载到页面的特定部分php-codeigniter - How to load data to a particular section of the page without refreshing the whole page in php-codeigniter
是否可以加载页面内容而不刷新整个页面 - Is it possible to load content of page without Refreshing the whole page
相关标签