Change style property of a DIV when a task is complete with Javascript

Question

I am using the below Javascript to go out and collect images from Instagram, this works successfully but sometimes the loading can take a while.

When feed.run has been completed I want to change the style of a div.

var feed = new Instafeed({
 accessToken: InstagramToken,
 limit: 10,
 target: 'instafeed',
 transform: function(item) { //Transform receives each item as its argument
// Over-write the original timestamp


item.timestamp = new Date(item.timestamp).toLocaleString('en-AU', {

   year: 'numeric', 
   month: 'long', 
   day: 'numeric'
 });

// return the modified item
return item;

},



 template: '<div class="vertical-line"></div><div class="post-title">{{timestamp}}</div><div class="vertical-line"></div><div class="post-container"><div class="post-image"><img src="{{image}}"/></div> </div>',
});
feed.run();

function abc() {
    var color = document.getElementById("myDIV").style.color;
    if (color === "aqua")
         document.getElementById("myDIV").style.color="black";
    else
         document.getElementById("myDIV").style.color="red";

};

</script>```

Answer 1

http://instafeedjs.com/#advanced
callbacks listed here

You can use the after callback advanced option:

var feed = new Instafeed({
 after: function(img){ abc() },
 accessToken: InstagramToken,
 limit: 10,
 target: 'instafeed',
 transform: function(item) { //Transform receives each item as its argument
// Over-write the original timestamp


item.timestamp = new Date(item.timestamp).toLocaleString('en-AU', {

   year: 'numeric', 
   month: 'long', 
   day: 'numeric'
 });

// return the modified item
return item;

},



 template: '<div class="vertical-line"></div><div class="post-title">{{timestamp}}</div><div class="vertical-line"></div><div class="post-container"><div class="post-image"><img src="{{image}}"/></div> </div>',
});
feed.run();

function abc() {
    var color = document.getElementById("myDIV").style.color;
    if (color === "aqua")
         document.getElementById("myDIV").style.color="black";
    else
         document.getElementById("myDIV").style.color="red";

};

Answer 2

In instafeed.js docs , it's mentioned that you can add some callbacks to the Instafeed function object, like before , after , success , error . In your case you want to add success callback function:

var feed = new Instafeed({
 accessToken: InstagramToken,
 limit: 10,
 target: 'instafeed',
 success: (images) => {
     // Change style here
 }
 ...
}
feed.run();