Forums : Feedback Forum

Widget cannot load asynchronously

The script code that inserts the widget HTML uses document.write(). This means the script cannot be loaded asynchronously using the "async" and/or "defer" attribute of the tag.

The result is that the page loading is suspended until the Open Hub widget loads, which is undesirable: the widget is a nice extra on the page, but it is not a crucial piece of information that should be able to cause a delay in the displaying of the main content.

Would it be possible to change the script code such that it can be loaded asynchronously? Or perhaps not serve the widget as a script at all, but for example as an animated GIF.

Maarten ter Huurne almost 3 years ago

This issue was a problem for my web site too, by slowing down page loads or even blocking the page load at some point. I don't understand why OpenHub hasn't updated their widgets to support async.

I found a simple work-around for this issue:

<!-- we want to display the widget here, but load it when all else in the page was loaded -->
<a><span id="openhub-widget-target"></span></a>
<!-- the rest of the page goes here -->
<!-- hack for the synchronous openhub widget script -->
<span hidden id="openhub-widget-source"><script type="text/javascript" src="">
<script>document.getElementById("openhub-widget-target").innerHTML = document.getElementById("openhub-widget-source").innerHTML</script></span>

This places the OpenHub widget script at the very end of the page in a hidden span and then runs a script that copies the HTML populated by the widget's document.write() to the place in the document where we want it.

PS. I couldn't get this post not to mess up with HTML tags, so used &lt; to replace <

Hope this helps.

  • Robert van Engelen
engelen 5 months ago

Post a Response