在使用 PHP & jQuery ajax 方法实现的聊天室中，我如何放置表情符号/笑脸？答案

【问题标题】：In a chat room implemented using PHP & jQuery ajax method, how can i put emoticons/ smileys?在使用 PHP & jQuery ajax 方法实现的聊天室中，我如何放置表情符号/笑脸？
【发布时间】：2012-01-04 13:43:30
【问题描述】：

我创建了 3 个页面 - mainpage.php、post.php、display.php。
mainpage 有一个带有 div id 'chatbox' 的主聊天界面，以及一个带有提交按钮的 textarea。单击提交按钮后，使用 jQuery 调用 post.php 并将用户的消息输入数据库。这没有问题。

然后我使用jQuery ajax 方法（见下文）调用display.php 并将返回的内容放入聊天框div 中。代码如下：

function loadLog(){  
        if(counter>1)
                    delaytime=2500;
        counter++;
                var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; 
        var id=$("#ID").val();
        var _url='display.php?Id='+id;
        $.ajax({  
            url:_url,
            cache: false,  
            success: function(html){  
                $("#chatbox").html(html); //Insert chat from DB into the #chatbox div       
                var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; 
                if(newscrollHeight > oldscrollHeight){  
                    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal');  
                }  
            },  
        });  
    }

注意：这是一个每隔 2500 毫秒调用一次的函数-

setInterval (loadLog, delaytime);

这也很好用。

现在，在display.php，我使用了

echo PIPHP_ReplaceSmileys($chatdisp['Msg'], 'smileys/');

在聊天中显示笑脸。代码在这里： http://pluginphp.com/plug-in59.php

我的问题：由于我们每 2500 毫秒刷新一次display.php，因此表情符号每次显示时都会闪烁。文本不会发生这种情况，因为文本很快，而图像需要时间加载。这不太理想。有没有办法防止这种闪烁？

【问题讨论】：

你不必大喊大叫，我们都听得很清楚

标签： php jquery ajax chat chatroom

【解决方案1】：

尝试将微笑设置为背景。 1 个包含所有情绪的大文件。它将被加载一次，之后您可以轻松地在块上使用类定义设置微笑。例如：<div class="emotion lol"></div>

【讨论】：

+1 - CSS sprites 可能是这个用例的最佳解决方案。
@EgorSazanovich 我应该将笑脸设置为哪个页面？
@TomMedley 图像精灵在一天结束时也将是一张图像。我们只显示图像的一部分。问题是每次按下刷新时都必须加载图像......那么它是如何工作的呢？
该代码在某些浏览器中完美运行......在其他浏览器中却没有:(
@PrernaChikersal Trouble is that image too will have to load every time refresh is pressed 不会再次加载，感谢浏览器的缓存。在 main(index) 文件中设置 CSS 类的定义，在您需要的部分页面上使用类。