加载 instagram 嵌入后的 Javascript 回调？

Posted 2023-03-31

【中文标题】加载 instagram 嵌入后的 Javascript 回调？

【英文标题】：Javascript callback after instagram embeds have loaded?

【发布时间】：2015-05-22 08:42:59

【问题描述】：

我正在尝试使用 Masonry 平铺多个 Instagram 嵌入。问题是 instagram 嵌入在加载后会改变大小，因此布局会留下空隙。

当页面上的所有 instagram 嵌入都已加载时，我可以使用回调吗？我想我应该在 Instagram 嵌入正确加载和调整大小后再次触发砌体

试过$(document).ajaxStop()没用

【问题讨论】：

你为什么不先从 instagram 加载它然后渲染Masonry？

您是否对这些嵌入进行硬编码？他们是否遵守任何选择规则（某些标签的最后一张照片，特定用户的最后一张照片）？在我看来，您应该向 Instagram API 发出请求，同时获取所有照片并使用响应 (json) 创建自己的 html。但这种方法取决于您如何选择照片。

@aswzen 是的，这正是我想要做的，请详细说明如何实现这一目标？现在发生的情况是当页面加载时，instagram 嵌入被部分加载（以文本形式），然后 iam 假设它进行 ajax 调用以加载 iframe 的图像和样式表。我需要一种方法来知道嵌入已经正确完成加载，以便我可以触发砌体

@LéoMuniz 我目前正在通过将嵌入代码复制到新帖子中进行嵌入（通过文本选项卡上的 wordpress TinyMCE 编辑器），我将其中的几个分别作为单独的帖子

我已经删除了我的答案，因为我想念这个问题。

【参考方案1】：

我在使用 Twitter javascript 嵌入代码时遇到了由于 AJAX 请求而调整大小的问题。我使用以下代码解决了这个问题：

$('#div').bind("DOMSubtreeModified", function() 
    // ...
);

当在 id 为 div 的 div 元素下修改元素时，将执行此代码。这非常有用。如果您需要更多帮助，请不要害怕对此答案发表评论。

【讨论】：

在 Instagram 上也能很好地工作。我用它来获取 div 的最终高度，但它返回了旧的高度，所以我使用了window.setTimeout('function()',50);，现在效果很好

【参考方案2】：

Daniel Buchner 提供的解决方案可用于检测（事件回调）元素调整大小。您可以将每个嵌入包装在一个元素 (<div>) 中，并将调整大小侦听器附加到您的 div。每当有调整大小时，触发砌体。如果重新排列触发器过度饱和，请在调整大小事件发生时设置超时（500 毫秒），以便仅在稳定时间后重新排列。

调整大小监听器可用here。

【讨论】：

听起来不错，虽然我有点担心使用超时。会尽快尝试一下