本篇教程是使用ajax中最原始的load方法去加载自定义表情，因为我们几乎在打开每个页面时都会载入这些自定义表情，每一个表情就是一个图片，会增加一次页面请求。
而使用load方法可以在访客点击插入表情时才去请求这些图片，所以可以有效减少页面请求，加快页面载入速度！该方法大部分步骤和普通的自定义表情一样，下面是实现步骤：
当然，在此之前你要先下载好表情，放在主题某个文件夹内。
接着是自己新建一个smiley.php文件，放在自己主题内自定义的文件夹，比如 inc文件夹，文件内容如下：
<script type="text/JavaScript" language="javascript"> /* <![CDATA[ */ function grin(tag) { var myField; tag = ' ' + tag + ' '; if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') { // textarea的id腰围comment myField = document.getElementById('comment'); } else { return false; } if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = tag; myField.focus(); } else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; var cursorPos = endPos; myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length); cursorPos += tag.length; myField.focus(); myField.selectionStart = cursorPos; myField.selectionEnd = cursorPos; } else { myField.value += tag; myField.focus(); } } /* ]]> */ </script> <div id="smilelink"><!-- 下面全部替换为你的表情图片路径 --> <a onclick="javascript:grin(':?:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_question.gif" title="汗" alt="汗" /></a> <a onclick="javascript:grin(':razz:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_razz.gif" title="色" alt="色" /></a> <a onclick="javascript:grin(':sad:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_sad.gif" title="悲" alt="悲" /></a> <a onclick="javascript:grin(':evil:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_evil.gif" title="闭嘴" alt="闭嘴" /></a> <a onclick="javascript:grin(':!:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_exclAIm.gif" title="调皮" alt="调皮" /></a> <a onclick="javascript:grin(':smile:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_smile.gif" title="笑" alt="笑" /></a> <a onclick="javascript:grin(':oops:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_redface.gif" title="惊" alt="惊" /></a> <a onclick="javascript:grin(':grin:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_biggrin.gif" title="亲" alt="亲" /></a> <a onclick="javascript:grin(':eek:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_surprised.gif" title="雷" alt="雷" /></a> <a onclick="javascript:grin(':shock:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_eek.gif" title="馋" alt="馋" /></a> <a onclick="javascript:grin(':???:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_confused.gif" title="晕" alt="晕" /></a> <a onclick="javascript:grin(':cool:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_cool.gif" title="酷" alt="酷" /></a> <a onclick="javascript:grin(':lol:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_lol.gif" title="奸" alt="奸" /></a> <a onclick="javascript:grin(':mad:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_mad.gif" title="怒" alt="怒" /></a> <a onclick="javascript:grin(':twisted:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_twisted.gif" title="狂" alt="狂" /></a> <a onclick="javascript:grin(':roll:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_rolleyes.gif" title="萌" alt="萌" /></a> <a onclick="javascript:grin(':wink:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_wink.gif" title="吃" alt="吃" /></a> <a onclick="javascript:grin(':idea:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_idea.gif" title="贪" alt="贪" /></a> <a onclick="javascript:grin(':arrow:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_arrow.gif" title="囧" alt="囧" /></a> <a onclick="javascript:grin(':neutral:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_neutral.gif" title="羞" alt="羞" /></a> <a onclick="javascript:grin(':cry:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_cry.gif" title="哭" alt="哭" /></a> <a onclick="javascript:grin(':mrgreen:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_mrgreen.gif" title="嘿" alt="嘿" /></a> </div>
上面的表情图片地址用了绝对路径，博主使用的路径并没有用wp的主题目录函数，因为如果这样在下面的load方法中会不起作用。上面图片的路径改成你自己的。
步骤二
在评论表单适当的位置添加一个表情div盒子，这个盒子用来装载要显示的评论表情，也就是装载上面的smiley.php文件，我们装载的方式就是用load方法。比如：博主将这个盒子放在评论工具之后：
<div id="comt_tools">
<a href="javascript:;" class="smilies tbox" id="comt_smilies">表情</a><a href="javascript:;" class="img tbox" id="comt_img">插入图片</a><a href="javascript:;" class="url tbox" id="comt_url">插入链接</a><div id="biaoqing"></div>
</div>
其中最后的;<div id="biaoqing"></div>就是表情盒子。
步骤三
添加js代码，toggle方法和load方法并用，前者控制表情的显示/隐藏，后者控制加载方式。
$('#comt_smilies').click(function() { //表情按钮的ID
$('#biaoqing').fadeToggle(500).CSS('display','inline-block'); //控制表情盒子的显示/隐藏
$('#biaoqing').load('/wp-content/themes/inlojv/inc/smiley.php'); //load方法将smiley.php装载到表情盒子内
});
值得注意的是#biaoqing要控制其css属性为display:none，先行隐藏。
通过load方法，把请求数大大降低：（如图 相比之前减少一半）
