jimfog Posted June 21, 2015 Share Posted June 21, 2015 I have placed all my code inside a doc ready function. The problem is that until this function runs that markup is "unpainted"...the result is that the user sees for a fraction of a second the unpainted markup(as the HTML is loaded first and then the JS code inside doc.ready)... How I can prevent such effect...I hope you understand what I am talking about. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2015 Share Posted June 21, 2015 Because JavaScript is loaded last, you should apply the minimum css the for the page to render enough to show the finished layout, this can be adjusted later by js code if required. Link to comment Share on other sites More sharing options...
Ingolme Posted June 21, 2015 Share Posted June 21, 2015 It depends on what your function is doing. When I have time-critical Javascript I usually put it right inside or below the element that it's referencing. Link to comment Share on other sites More sharing options...
jimfog Posted June 21, 2015 Author Share Posted June 21, 2015 I just made the following thought... Is it maybe better that initial data/state is created with PHP and not JS? JS will be there just for modification with ajax calls? I just what your comment on the above. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2015 Share Posted June 21, 2015 (edited) As php returns complete html content before JavaScript even runs, and which is also not reliant unlike js on being enabled as well, php would be the better option, even google suggests you use the minimum css to render page completely, without causing unpainted area to show, layers jumping about because for example a js image has not been inserted yet, where the better option would be a default image, so at lest you have something to fill the empty area while js is delayed. They then suggest you use JavaScript placed at bottom of page, to add remaining css for such content that are not seen on the initial loading of page, especailly for JavaScript content etc. IT would help to combine and minify css/js files, together and then cache, to reduce overall load time. I use Yslow, a add-on for firebug, which helps no end to help reduce page size and load time. Edited June 21, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now