如何使用FileReader加载图像并将其设置为有效的数千个DIV的背景

Question

当前我正在使用filereader从用户的系统中加载sphite sheet png，并将数据保存到图像变量为其src。然后，我填充了一个超过一千个div的单独的div，每个divs都有一个

style="background-image: url(' + loadedImage.src + ');

变成：

style="background-image: url(data:image/png;base64,iVBORw0KGgoAAA...)"

在元素中。图像可能很大，并且最多可以有2048张这些图像。这会在创建时引起很多滞后。

我对此任务的局限性是我无法对服务器进行任何调用，文件上传和显示必须在前端。否则，我只会将文件保存到服务器并使用URL使用CSS，以便浏览器可以缓存图像并将样式使用到所有Divs上。

有更好的方法可以做到吗？我可以使用JS？

使用FileReader API读取图像后，实际上可以将规则添加到现有样式表中。

也许这样的事情会起作用。只是一个主意。

var sheet = document.styleSheets[1];
function fileReader(e) {
  if(window.FileReader) {
    var file  = e.target.files[0];
    var reader = new FileReader();
    if (file && file.type.match('image.*')) {
      reader.readAsDataURL(file);
    } else {
      console.log('please add an image')
    }
    reader.onloadend = function (e) {
      sheet.insertRule(".foo" + "{ background:url(" + reader.result + ")}", 0);
    }
  }
}
document.getElementById('add-img').addEventListener('change', fileReader, false);

.foo {
  width: 100px;
  height: 100px;
}

<input type="file" id="add-img" />
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

是的，您可以使用以下方式添加CSS：

document.styleSheets[0].insertRule('class="myClass" {background-image: url(' + loadedImage.src + '}', 0)