Materialboxed 不适用于 data:image/png; base64

Question

我正在使用 materializecss v0.100.1，我在使用“materialboxed”类时遇到问题。 我正在将图像从“多个输入文件”加载到文件数组，然后将数组放入$.each并将其添加到带有“collection”类的 div。

我可以将图像可视化，但是当我单击图像时，“materialboxed”类不起作用。 我已经用$('.materialboxed').materialbox()对其进行了初始化$('.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.readAsDataURL(v);之后添加了以下内容reader.readAsDataURL(v);

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