1 Correct answer
Thanks Osgood,
As you know I'm no expert, but this is what I suspected. It seems once I resize the browser (slowly) the cards do contain the tweet and the other cards fall in place properly. I was trying to figure out how to delay page load until the twitter scripts have had a chance to do their thing, but that probably makes no sense. How do I set a time out to the masonry script? I would love to give your code a try.
As always, thank you!
Dave
By @daveharr1s0n
Instead of hard coding the script
...
13
Replies
1. Nobody resizes viewports except web designers.
Normal users typically keep the same viewport throughout.
2. If you think it will help, you can defer loading external Twitter scripts until after page load.
By @Nancy OShea
I think what's happening here is the Twitter script NEEDS to load FIRST so the masonry script can calculate what vertical space the twitter content needs to occupy.
Using a defer on the masonry script tag didnt seem to make any difference when I tested it but I didnt test thoroughly. What did make a difference is setting a time out on the masonry script of 2 seconds and actually writing that script to the page.
Another method that seemed to work was checking if the twitter-tweet-rendered class had been appended to the page by the twitter script, then calling the masonry script.
I was wondering if you could use an async/await function to deploy 2 scripts so the masonry script doesnt execute until after the twitter script. The 2 methods I mention are probably a bit of guess work because the Twitter script might not load for 3 seconds and I dont know if a script will run unless the page is reloaded.
I think there must be a simple way of doing this as someone else must have come across this problem before, maybe best to ask the script providers.
If the OP wants the 2 solutions I came up with I can provide some code.
Thanks Osgood,
As you know I'm no expert, but this is what I suspected. It seems once I resize the browser (slowly) the cards do contain the tweet and the other cards fall in place properly. I was trying to figure out how to delay page load until the twitter scripts have had a chance to do their thing, but that probably makes no sense. How do I set a time out to the masonry script? I would love to give your code a try.
As always, thank you!
Dave
By @daveharr1s0n
Instead of hard coding the script:
<script async src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
Try dynamically generating it, so remove the hard coded link to the masonry script and replace it with the below which has a 1 second time delay:
<script>
setTimeout(function(){
let masonryScript = document.createElement( 'script' );
masonryScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js');
document.body.appendChild(masonryScript);
}, 1000);
</script>
So far, for me at least, its worked every time BUT its not a guarantee because if the twitter script is delayed for more that 1 second then the masonry script will fire off and you will end up with the same result, overlapping <divs>. Twitter servers should be super efficient at delivering content, so it may help.
There is another method which checks the twitter script has been loaded every 1 second before the masonry script fires off but that is a bit more involved. Try the above first and see what results you get and if it doesnt work for you we can try the more complex method.
This issue needs to be flagged up to the script produces as using dynamic data pulled in from APIs is common practice. If the script only works with static data that needs to be pointed out somewhere in the scripts information page. I don't know anything about the script, never used it, so maybe it is addressed somewhere in the information they provide.
AdChoices