Chrome 扩展开发 Instagram 加载事件

Question

我最近开始开发一些小的 Chrome 扩展以供娱乐。我目前正在为 Instagram 开发一个 "Download Now" 扩展程序，它让您只需单击一个下载按钮即可下载 Instagram 图片，该按钮的值 "Get" 位于 post header .

如您在下面的屏幕截图中所见，按钮按预期显示。

但是当我向下滚动加载新 posts 的位置时，该按钮没有出现。

我现在的问题是，如何预测加载事件，以便按钮会出现在正在加载的 post 上？

我的 jQuery 目前看起来是这样的，

jQuery(document).ready(function() {
     jQuery(window).load(function() {
         var location = jQuery('._s6yvg');
         jQuery(location).each(function() {
             var image = jQuery(this).parent().find('div > div > div > div > img').attr('src');
             jQuery('<a class="get-button" href="' + image + '">Get</a>').appendTo(this);
         });
     });
});

如果您需要有关扩展的更多信息，请告诉我，我想我写了最重要的。我很抱歉语言不好。我不是母语人士。

提前致谢。

Answer 1

由于没有事件供您尝试并与之关联，您需要创建自己的事件"event."在这种情况下，它将用于加载图像的时间。

考虑在页面上加载一组新图像时发生的情况。发生的一件事是文档的高度会改变。当动态加载新内容时，文档的高度会增加。还在我身边吗？

知道了这一点，我们可以创建一个函数来每隔一段时间检查文档的高度。我不会为您编写完整的脚本，但下面是您可以执行的操作的示例。

// Your "append" method
function appendButton()
{
  var location = jQuery('._s6yvg');
  jQuery(location).each(function() {
    var image = jQuery(this).parent().find('div > div > div > div > img').attr('src');
    jQuery('<a class="get-button" href="' + image + '">Get</a>').appendTo(this);
  });
}

// This will monitor the document's height.
// When new images are loaded (thus making the document height increase),
// we will call the `appendButton` method again.
function monitorDocumentHeight()
{
  // Get the current $(document).height()

  // Compare the current height to the most recent height variable

  // If there is a difference in current_height and last_height:
    // > then the height has changed and we should
    // > call the `appendButton` method and store this height value.

  // Set an interval to run this method again and check the height (200ms)
}

jQuery(document).ready(function() {
  appendButton();             // The initial call
  monitorDocumentHeight();    // Start the interval
});

请注意，这还会将按钮附加到上面有按钮的现有图像上。您需要通过向 appendButton 方法添加条件来避免这种情况。

Chrome 扩展开发 Instagram 加载事件

Chrome Extension Development Instagram Loading Event

javascript

jquery

google-chrome

instagram