Userscripts.org

I'm creating a script that will replace text smilies like ;) :) :D etc.

It's working fine, but each time a page loads, it makes my browser freeze for about 5 seconds, then it loads all the smilies.

How can I make my script run faster without making my browser hang?

I have already converted the images to data:uris.

//--- Images ---

var tongue = "data:image/gifAAAAAAACa0GEQSU4YB1TWgIA ...";
var happy = "data:image/gif;base64,R0lGODlhEQARALMAABy+ASTTAiXWAi ...";
var lol = "data:image/gif;base64,R0lGODlhEQARALMAABy+ ...";
var wink = "data:image/gif;base64,R0lGODlhEQARALMAABy+AQCZACTTAi ...";
var sad = "data:image/gif;base64,R0lGODlhEQARALMAABy+AQAzACHLAiT ...";
var blush = "data:image/gif;base64,R0lGODlh ...";
var angry = "data:image/gif;base64,R0lGODlhEQARANUAAB7JAR ...";
var tears = "data:image/gif;base64,R0lGODlhEQARANUAA ...";
var stunned = "data:image/gif;base64,R0lGODlhEQARALMAACDIARawARWt ...";
var cool = "data:image/gif;base64,R0lGODlhEQARANUAAAAAAAAB ...";
var yawn = "data:image/gif;base64,R0lGODlhEQARANUAAAAAA ...";
var ill = "data:image/gif;base64,R0lGODlhEQARALMAAAAAAEqZAEudAE+iAFK ...";
var confused = "data:image/gif;base64,R0lGODlhEQARANUAAB7J ...";
var love = "data:image/gif;base64,R0lGODlhEQARANUAACXXA ...";
var mean = "data:image/gif;base64,R0lGODlhEQARANUAAAIAA ...";
var glad = "data:image/gif;base64,R0lGODlhEQARANUAAAI ...";

//--- Functions ---

function replaceSmilie(smilie, surl)
{
  var reptext = new RegExp(smilie, "gi");
  document.body.innerHTML = document.body.innerHTML.replace(reptext, "");
}

//--- Replace ---

/*
replaceSmilie(":\\)", happy);
replaceSmilie(";\\)", wink);
replaceSmilie(":P", tongue);
replaceSmilie(":\\(", sad);
replaceSmilie("8o", stunned);
replaceSmilie("80", stunned);
replaceSmilie(":o", stunned);
replaceSmilie("\\*cool\\*", cool);
replaceSmilie("\\*yawn\\*", yawn);
replaceSmilie("\\*ill\\*", "ill");
replaceSmilie("\\*angry\\*", angry);
replaceSmilie("\\*mad\\*", angry);
replaceSmilie("\\*sad\\*", tears);
replaceSmilie("\\*cry\\*", tears);
replaceSmilie("\\*tears\\*", tears);
replaceSmilie(":'\\(", tears);
replaceSmilie(":D", lol);
replaceSmilie("\\*blush\\*", blush);
replaceSmilie("\\*confused\\*", confused);
replaceSmilie("\\*love\\*", love);
replaceSmilie("\\*mean\\*", mean);
replaceSmilie("\\*glad\\*", glad);

Don't use the innerHTML! Look at this thread, there is a very good piece of code how to replace part of text with an element:

http://userscripts.org/forums/2/topics/2698

I can't figure out how to incorporate that into my script. How could I change it to adding an image instead?

Also, is there any way to do all the smilies at once, rather than the same function over and over?

replace:

with (t.parentNode.insertBefore(document.createElement('span'), t))
textContent = RegExp.$1,
style.cssText = 'color: #f00; font-size: 14pt;';

with

with (t.parentNode.insertBefore(document.createElement('img'), t))
src= "data:image/gif;base64,.....",
border="0px",
title="Smile";