How to apply base64 encoded data uri's dynamically?

Question

I have the following z.js method to apply styles dynamically to DOM element like this:

z.Utils.applyStyle(element,'background-image:stamp.gif')

The z.Utils.applyStyle function is here:

z.Utils.applyStyle = function(elRef,style)
{
  if(typeof(elRef) == 'string')
  {
     elRef = document.getElementById(elRef);
  }
  if(elRef == null || style == null || elRef.style == null)
  {
     return null;
  }
  style=style.replace(/\_/g,'-').toLowerCase();
  var pairs = style.split(";");
  for(var ii =0; ii < pairs.length; ii++)
  {
      var kv = pairs[ii].split(":");
      // trim value
      if(!kv[1])
      {
         continue;
      }
      var value = kv[1].replace(/^\s*/,'').replace(/\s*$/,'');
      var key = "";
      for(var jj = 0; jj < kv[0].length; jj++){
          if(kv[0].charAt(jj) == "-")
          {
             jj++;
             if(jj < kv[0].length)
             {
                key += kv[0].charAt(jj).toUpperCase();
             }
             continue;
          }
          key += kv[0].charAt(jj);
      }
      switch(key)
      {
          case "float":
            key = "cssFloat";
            break;
          case "right":
            key="left";
            value=value-z.Utils.getElementOffset(elRef).width;
            break;
          case "bottom":
            key="top";
            value=value-z.Utils.getElementOffset(elRef).height;
            break;
      }
      try
      {
          elRef.style[key] = value;
      }
      catch(e)
      {
          //some error thrown;
      }
  }
  return true;
};

What to do when I want to use the function above to apply data uri as background-image? Something like:

z.Utils.applyStyle(element,'background-image: url(data:image/gif;base64,[base64-code])');

I did it with a 37K image, but it failed to work.
What I did wrong?
May it be, that data uri's are not available on dynamical assignments?
Possibly large 30k+ size base64 data is the fault?
The problematic css can be viewed here:
http://bookingshare.fw.hu/data_uri_long.css

Thank you all for your help in advance!

Answer 1

I think the issue is with this line:

style=style.replace(/\_/g,'-').toLowerCase();

Base64 is case sensitive. This line will make the entire style lowercase. URLS in Upper case will not work either.

Why are you using this z.js anyway? You can simply set the style using JS.

element.style.backgroundImage="url('image.png')";

Answer 2

@Sachleen you are right. Somewhat. style.replace(/\\_/g,'-').toLowerCase() confuses base64 decoding. But code wouldn't work well afterwards, because var pairs = style.split(";"); also confuses base64 decoding just afterwards on line 12 of applyStyle method, when i tried to apply a bunch of style to an element, like in

z.Utils.applyStyle(elem,'width:10px;'+
    background:transparent url(data:image/gif;base64,stg...) no-repeat;')

Because of ";" string existence in background style declaration "url(data:image/gif;base64," , there will be an additional array item in "url(data:image/gif" , which is certainly useless itself, as it is a header of the background declaration, so style declaration is splitted up unneccessarily and dropped entirely;

z.js is developed entirely by me, and needed for educational purposes for abstracting away case-sensitive confusions of beginners of javascript working with the DOM. z.Utils.applyStyle(elem,'Background-Image:url(stamp.gif)') is equivalent with z.Utils.applyStyle(elem,'background-Image:url(stamp.gif)') and also with z.Utils.applyStyle(elem,'background-image:url(stamp.gif)') . Because of css errors unexists runtime, i found that useful when collaborating with my students.

Thanks anyway, letting me focus on the limit of altering styles runtime together with base64 encoded images, which results in better network performance.