如何動態應用base64編碼的數據uri？

Question

我有以下z.js方法可將樣式動態地應用於DOM元素，如下所示：

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

z.Utils.applyStyle函數在此處：

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;
};

當我想使用上面的功能將數據uri作為背景圖像應用時該怎么辦？ 就像是：

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

我用37K圖像完成了此操作，但無法正常工作。
我做錯了什么？
可能是數據uri在動態分配中不可用？
可能是30k +大小的base64數據很大嗎？
有問題的CSS可以在這里查看：
http://bookingshare.fw.hu/data_uri_long.css

謝謝大家的幫助！

Answer 1

我認為問題在於此行：

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

Base64區分大小寫。 這條線將使整個樣式變為小寫。 大寫的URL也不起作用。

您為什么仍然使用此z.js ？ 您可以簡單地使用JS設置樣式。

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

Answer 2

@Sachleen，你是對的。 有些。 style.replace(/\\_/g,'-').toLowerCase()混淆了base64解碼。 但是之后代碼將無法正常工作，因為var pairs = style.split(";"); 當我嘗試將一堆樣式應用於元素時，也會在applyStyle方法的第12行上混淆base64解碼

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

因為";" 串存在於背景樣式聲明"url(data:image/gif;base64," ，將有在附加的數組項"url(data:image/gif" ，這當然是無用的本身，它是的報頭背景聲明，因此樣式聲明會不必要地拆分並完全刪除；

z.js完全由我開發，出於教育目的，需要使用它來消除使用DOM的javascript初學者的區分大小寫的混淆。 z.Utils.applyStyle(elem,'Background-Image:url(stamp.gif)')與z.Utils.applyStyle(elem,'background-Image:url(stamp.gif)')以及z.Utils.applyStyle(elem,'background-image:url(stamp.gif)') z.Utils.applyStyle(elem,'background-Image:url(stamp.gif)') z.Utils.applyStyle(elem,'background-image:url(stamp.gif)') 。 由於css錯誤不存在運行時，我發現與學生合作時很有用。

無論如何，還是讓我專注於更改樣式運行時與base64編碼的圖像的限制，這可以提高網絡性能。