3

My webpage includes a less file instead of css. This is parsed by the less js script. My site's js script fires on dom ready and based on different dom dimensions layouts the page.

The problem is, over slow network my js file can fire before less js is able to download the less file. Since this is an unknown file type so the browser is not obliged to wait for this file to download and then fire dom ready, even when it is in the <head> section. In this scenario my js reads incorrect dimensions since no CSS rules have been applied yet.

So, my query is, how do I know when the less file have been downloaded. So that my js code can get fired after less has been downloaded and dom is ready.

AppleGrew
  • 9,302
  • 24
  • 80
  • 124
  • Maybe you could try to use less server-side instead of compiling it each time client side. Your users would not be obliged to have js turned on to get css... You may use leesc or lessphp for this. – greg0ire May 25 '12 at 15:04
  • 2
    Perhaps not an *answer*, so I'll comment: You can bypass this problem entirely by processing the LESS server-side (and caching the result). – T.J. Crowder May 25 '12 at 15:04
  • Setting the MIME type for `.less` files to `text/css` on the server side could help. – Stefan May 25 '12 at 15:06
  • Please note that for production server I will indeed use actual css file. This is a development server on the network. – AppleGrew May 25 '12 at 15:26
  • @Stefan I will try your MIME trick. – AppleGrew May 25 '12 at 15:27
  • @Stefan It seems I am already using `text/css` MIME, but `rel` in `` is `stylesheet/less`. – AppleGrew May 25 '12 at 15:41
  • possible duplicate of [Load less.js rules dynamically](http://stackoverflow.com/questions/3175013/load-less-js-rules-dynamically) – Praveen May 10 '13 at 11:41

1 Answers1

0

Check out the answer to this similar question - sounds like you just need to fire a less.refreshStyles() event which will re-compile <style> tags with type="text/less".

Community
  • 1
  • 1
MikeZ
  • 858
  • 1
  • 7
  • 20