Chrome扩展开发Instagram加载事件

Question

我最近开始开发一些小型Chrome扩展程序以获得乐趣。我目前正在制作一个＆＃34;立即下载＆＃34; Instagram的扩展程序，只需单击下载按钮即可下载Instagram图像，其值为＆＃34; Get＆＃34;放在帖子标题中。

正如您在下面的屏幕截图中看到的那样，按钮按预期显示。

但是当我向下滚动加载新帖子的位置时，按钮不会出现。

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

到目前为止，我的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

由于没有您尝试绑定的事件，您需要创建自己的“事件”。在这种情况下，它将用于何时加载图像。

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

知道这一点，我们可以创建一个函数来检查每个间隔的文档高度。我不打算为你编写完整的脚本，但下面是你可以做的一个例子。

// 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方法添加条件来避免这种情况。