Question

我想在用户点击预览图标时加载（base64）png图像以进行大放异常。每个预览图标都会显示另一个图像，该图像将根据某些参数通过ajax加载。

如何在请求完成后手动调用MP？每次ajax完成它都说没有找到图像。或者只是不显示图像（黑色透明屏幕）

我的代码如下所示：

HTML和JS：

function loadPopupImage(element, p1, p2, p3, p4, p5) {
  if (element.href == "") {
    var request = $.ajax({
      method: "POST",
      dataType: "xml",
      timeout: 5000,
      data: {
        P1: p1,
        P2: p2,
        p3: p3,
        P4: p4,
        P5: p5
      },
      url: "<%=URL%>"
    });
    request.done(function(response) {
        element.href = "data:image/png;base64," + response.documentElement.textContent;
        $.magnificPopup.open({
          items: {
            src: element
          },
          type: 'inline'
        });
      }
    }
  }

<a class="magnific-popup" onclick="loadPopupImage(this,'<%=p1%>','<%=p2%>','<%=p3%>','<%=p4%>','<%=p5%>')">
  <img width="20" src="/images/70x70px.png">
</a>

如果我删除$.magnificPopup.open部分。它显然没有显示弹出窗口，但我可以再次单击预览，可以在浏览器选项卡中看到图像。

Answer 1

我找到了解决方案。其实很简单...

request.done(function(response){
    element.href = "data:image/png;base64,"+response.documentElement.textContent;
    $.magnificPopup.open({
        items: {
            src: element.href,
        }
    });
});

我必须将 .href 添加到元素中。现在它就像一个魅力。

我也可以直接将数据字符串添加到src中，但我想将数据字符串保留在元素中。这种方式可以在用户点击链接后打开图像，无需再次执行ajax请求。

在AJAX请求中手动打开Magnific Popup

1 个答案: