Widgets don't render when JS is lazyloaded

[Shimon]

To improve site performance we lazy load widgets-js when user scrolls in first tweet in the view. If this happens before document.ready, widgets render just fine. However if the widget is deep below the fold, and doesn’t come into the view until much later, widget never renders, and a class twitter-tweet-error is appended to the <blockquote>.

What’s missing? I was trying to find any debug information, but to no avail.

Tagging JakeHarding and andypiper for visibility

[niall]

Twitter’s widgets JavaScript scans the DOM when initially loaded, looking for HTML elements matching a known fallback HTML element such as blockquote.twitter-tweet. Check to make sure the HTML element you would like to enhance exists on the page at the time widgets-js executes.

If you are dynamically loading content into the document you will need to call Twitter widgets JavaScript initialization passing a parent of the element you would like to be enhanced (default document rescan).

You might prefer factory functions with a target container for dynamic loading of Twitter embeds.

[Shimon]

@niall, yes we include the default, unmodified markup on the page. The only difference is we use no script option in oEmbed, and require widgets-js on the first encounter with a tweet. However, instead of displaying a proper tweet widget, the blockquote gets a class twitter-tweet-error appended. Again, please note this only happens when widgets-js is loaded after document.ready event, while the tweets are already available on the page. If the script loads before ready, then it works just as expected.

[Shimon]

Would an example page be helpful?

[Shimon]

In the end the bug was on our side, with a badly written Function.prototype.bind() polyfill. However it would be really nice to know how to enable debug output in the console, or some other form of tracking down what chocked widgets-js.

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.