Chrome Extension Entwicklung Instagram Loading Event

Question

Ich habe vor kurzem mit der Entwicklung einiger kleiner Chrome Extensions begonnen. Ich arbeite gerade an einer "Download Now" -Erweiterung für Instagram, mit der man ein Instagram-Bild mit einem einzigen Klick auf einen Download-Button mit dem Wert "Get" im Post-Header herunterladen kann.

Wie Sie auf dem Screenshot unten sehen können, erscheint die Schaltfläche wie erwartet.

Aber wenn ich den Punkt nach unten scrollen, wo es neue Beiträge lädt, wird die Schaltfläche nicht angezeigt.

Meine Frage ist nun, wie kann ich den Ladevorgang vorhersagen, so dass die Taste Gonna auf dem Pfosten erscheinen wird, die geladen werden?

Meine jQuery sieht wie folgt aus so weit,

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); 
     }); 
    }); 
}); 

Wenn Sie mehr Informationen über die Erweiterung brauchen nur mich wissen lassen, ich glaube, ich habe die wichtigsten geschrieben. Es tut mir leid für die schlechte Sprache. Ich bin kein Muttersprachler.

Vielen Dank im Voraus.

Answer 1

Da es kein Ereignis gibt, an das Sie sich binden können, müssen Sie Ihr eigenes "Ereignis" erstellen. In diesem Fall wäre es, wenn Bilder geladen werden.

Berücksichtigen Sie, was passiert, wenn neue Bilder auf die Seite geladen werden. Eine Sache, die passiert, ist, dass sich die Höhe des Dokuments ändert. Wenn neuer Inhalt dynamisch geladen wird, erhöht sich die Höhe des Dokuments. Immer noch bei mir?

Mit diesem Wissen können wir eine Funktion erstellen, die die Höhe des Dokuments in jedem Intervall überprüft. Ich werde nicht das vollständige Skript für Sie schreiben, aber das unten ist ein Beispiel dafür, was Sie tun können.

// 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 
}); 

Beachten Sie, dass dies auch Schaltflächen an vorhandene Bilder anfügt, die eine Schaltfläche enthalten. Sie möchten dies vermeiden, indem Sie der Methode appendButton eine Bedingung hinzufügen.