完全加载Twitter小部件后调用函数

Question

I'm having a bit of an issue at the moment with the Twitter API. I have a sidebar which uses JavaScript to dynamically measure the height of the footer upon page load and page resize.

I've recently placed the Twitter widget into the footer, which is causing an issue where the Twitter widget always loads last, no matter where I place it within my JavaScript file.

I've tried to use the event handler for calling the measuring function after the Twitter widget has fully loaded, but it still doesn't make a difference.

Does anyone have any suggestions?

Answer 1

You have a few options to solve this problem. You could use a JS method such as .setInterval which would continue to loop until the Twitter widget is in the DOM and then execute your function. Or alternatively you could use setTimeout and force your update footer function to wait until the Twitter widget is present. I would recommend the former.

If you're not comfortable using setInterval - you might want to check out this handy plugin that waits until your specified element is inserted into the DOM. Check it: https://gist.github.com/buu700/4200601

Asynchronous loading of third party widgets typically causes a few headaches. But the above solutions should point you in the right direction to sorting out your problem.

Finally - do you know that the Twitter widget allows you to set a specified height in the Widget settings on your Twitter account? This might also solve your problem: https://dev.twitter.com/web/embedded-timelines#dimensions

Good luck!