I started out googling and soon enough I found out a way to archive what I was after here. The second method described was what I was looking for. Sadly it did not work, so I started debugging it, here is what I came up with.
!function(a,b,c){var d,e,f;f="PIN_"+~~((new Date).getTime()/864e5),a[f]||(a[f]=!0,a.setTimeout(function(){d=b.getElementsByTagName("SCRIPT")[0],e=b.createElement("SCRIPT"),e.type="text/javascript",e.async=!0,e.src=c+"?"+f,d.parentNode.insertBefore(e,d)},10))}(window,document,"//assets.pinterest.com/js/pinit_main.js");
Loading //assets.pinterest.com/js/pinit.js, just loads pinit_main.js that makes the jQuery onload callback fire before pinterest is loaded, from the setTimeout.
Secondly the function to get the pinterest instance was a bit flawed, when I tested this in my AJAX application I noticed that when navigating around, adding/removing instances of pin buttons the objects gets cleaned up.
// Get the Pinterest instance get: function() { for (var i in window) { if (i.indexOf('PIN_') == 0 && typeof window[i] == 'object') { return window[i]; } } },
So extra checks needed to find the active instance. Here is my take on it:
var Pinterest = { load: function(callback) { $.getScript('//assets.pinterest.com/js/pinit_main.js', callback); }, // Get the Pinterest instance get: function() { var i; for (i in window) { if (window.hasOwnProperty(i)) { if (i.indexOf('PIN_') === 0 && typeof window[i] === 'object' && window[i].f.render.buttonPin !== undefined) { return window[i]; } } } }, // Render Pinterest buttons render: function(el) { if (el.id.indexOf("PIN_") === 0) { return; } this.get().f.render.buttonPin(el); } }
Try it out the JsFiddle here
Thanks sourcey for the initial code.