Select element "flickers" on first page load
See original GitHub issueThe use of $timeout (angular-chosen.js, line 72, see below) postpones the initialization of the chosen plugin to a later digest cycle. Because of that, the plain HTML select element will be painted first, leading to an ugly “flickering effect”.
$timeout(function() {
chosen = element.chosen(options).data('chosen');
});
Another approach to make sure the DOM is ready (without flickering) would be the default jQuery way:
$(document).ready(function () {
chosen = element.chosen(options).data('chosen');
});
Issue Analytics
- State:
- Created 7 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
Page flickers on load - hide/show javascript - Total Newbie
I have been researching this and I hear it's called DOM flicker. I know it's due to the hidden divs showing before the...
Read more >Your Guide to Website Flicker and How to Deal With It
Flicker refers to the experience of a webpage loading once, and then quickly changing content to display something new. It happens when you...
Read more >Script to Move Language Selector Box Flashes for Split ...
1) Welcome page loads, Language Selector Box (LSB) displays below Next button. (good!) 2) Click Next to go to next page, LSB flashes...
Read more >Avoiding content flickers (FOOC)
This is especially true for content near the top of your web page, as this flicker generally happens immediately after a page is...
Read more >Dropdown menu flickering when navigating between pages
The dropdown menu in the header region flickers (shows for a very short time) when navigating between pages. It does not happen on...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hi @leocaseiro, thanks for your quick reply. I’ve updated the tests as well.
@mehmetenes Here’s a gist to a patched version of the directive I use in my project for now: https://gist.github.com/boeserwolf/e3f42a0e476fbc8869e44aa58ccd5e08
As mentioned above, I solved the issue by using angular.element(document).ready() inside the link function. So the chosen plugin will be initialized as soon as the DOM becomes ready, which works like a charm.
@leocaseiro I don’t think that using angular.element(document).ready() inside the link function is a really bad solution. $timeout() ensures element.chosen() get’s called after the DOM was rendered. What we really want, is to apply element.chosen() as soon the DOM is available.
Just digged into the angular source: $timeout() wraps the callback in a try-catch construct, gives you control whether to call $rootScope.apply() and returns a nifty promise. The “flickering issue” remained if you’d use window.setTimeout() instead, because element.chosen() needs to be applied before the DOM is rendered. But I may be totally wrong. 😃