Materialboxed 不适用于 data:image/png;基地64

Question

>我正在使用materializecss v0.100.1，我对"materialboxed"类有问题。我正在将图像从"输入文件多个"加载到文件数组中，然后我$.each数组一起行走，并将其添加到带有类"集合"的div 中。

我可以可视化图像，但是当我单击图像时，"材料盒"类不起作用。我已经用$('.materialboxed').materialbox()初始化了它.我需要单击要在整个屏幕上显示的缩略图。谢谢。

$('#collection').empty();
$.each(files, function(k, v) {
  var reader = new FileReader();
  reader.onload = (function(theFile) {
    return function(e) {
      var algo = "<li class="collection-item avatar"><img src="" + e.target.result + "" alt="imagen" class="circle"/><span class="title truncate">" + theFile.name + "</span><p>" + typeOfFile(theFile.type) + "<br/>" + (bytesToSize(theFile.size)) + "</p><a onclick="removeFile(" + theFile + ")" class="secondary-content"><i class="material-icons">delete</i></a></li>";
      $('#collection').append(algo);
      $('#collection').find('img').addClass('materialboxed');
    };
  })(v);
  reader.readAsDataURL(v);
});

Answer 1

也在努力解决这个问题，问题是即使您在循环中reader.readAsDataURL(v);后调用$('.materialboxed').materialbox()，图像也没有加载。为了强制它仅在图像加载后运行，我在reader.readAsDataURL(v);后添加了以下内容

reader.onloadend = function () {
  $('.materialboxed').materialbox();
};