Avatars Move During Pageload

  • Resolved KingJ

    (@kingj)


    5 years, 11 months ago

    Hi,

    We’ve started using this plugin in a sidebar. Generally speaking it works really well – a far better user experience than using Twitter’s own embed code. However, i’ve noticed that when loading the page, the avatars associated with a tweet will move from slightly to the left (where they are cut off) to their proper position. This can be a little bit distracting and can skew metrics around pages having fully loaded.

    This appears to be because ctf-scripts.js applies the ctf-super-narrow CSS class to the author’s avatar element. However, this script is only run after load – so the page will render, including the feed, then the script runs and applies the appropriate class for running in a narrow column, triggering an animation to move the avatar into the correct place.

    Would it be possible to use CSS selectors to achieve this instead? It would also cut down on the download and execution time of ctf-scripts.js – which is by far the largest script on our WordPress install and has a pretty significant compile and execution time.

    Hope that’s not too negative – I really like this plugin overall as it does allow us to deliver a timeline to a user without them having to make their own requests off to Twitter!

    Many thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Craig at Smash Balloon

    (@craig-at-smash-balloon)

    5 years, 11 months ago

    Glad you like the plugin!

    The reason for using JS and the class instead of CSS and media queries is that as far as I know, you can’t use CSS to detect the width of a specific element, just the device and window width.

    You could add the class to the feed using a shortcode argument. For example:

    [custom-twitter-feeds class="ctf-super-narrow"]

    This should prevent the “jumping” that you’re seeing.

    As for the JS file load time, we haven’t had many reports of this being an issue but I can tell you that we are coming out with a “2.0” version this year. It will include a reworking of the JS that might help this.

    Let me know if you have more questions!

    – Craig

    Thread Starter KingJ

    (@kingj)

    5 years, 11 months ago

    Hi Craig,

    Many thanks for your fast reply. I wasn’t aware that the class attribute could be used to specify a built-in class rather than just a custom one. I’ve given it a try though and it has produced exactly the result I am after – avatars now remain in-place on page load and this has had a positive impact on various metrics such as time to first CPU idle (as well as looking consistent and good!).

    Thanks once again – i’m looking forward to 2.0 later this year.

    Plugin Contributor Craig at Smash Balloon

    (@craig-at-smash-balloon)

    5 years, 11 months ago

    No problem!

    Have a great rest of your week.

    – Craig

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Avatars Move During Pageload’ is closed to new replies.