Magnific Popup 在 AJAX 请求中手动打开答案

【问题标题】：Magnific Popup open manually in AJAX requestMagnific Popup 在 AJAX 请求中手动打开
【发布时间】：2018-03-06 13:18:05
【问题描述】：

当用户单击预览图标时，我想为放大的弹出窗口加载 (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 部分。它显然没有显示弹出窗口，但我可以再次单击预览并在浏览器选项卡中看到图像。

【问题讨论】：

您可以在想要加载图像时将图像源添加到图像中。所以会异步加载
谢谢...但我不太明白你的意思。你能再解释一下吗？
如果您只想异步加载图像，请使用：$(".theImageToLoad").attr("src", $(".theImageToLoad").data("src"));，在 HTML 内部使用 <img class="theImageToLoad" src="smallimagepath" data-src="largeImageSrc"/>
检查图像是否加载在这里阅读更多：stackoverflow.com/questions/1977871/…
我不想更改 img 标签。该图像仅显示我的预览（所有元素都相同）。我希望 magnific 在 href 属性中显示内容（来自 ajax 响应的 base64 png）

标签： javascript jquery ajax magnific-popup

【解决方案1】：

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

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

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

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

【讨论】：