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