nhanfu / htmljs

HTML render engine and data binding (MVVM)
MIT License
282 stars 48 forks source link

CSS loading delay to be applied #3

Open findborg opened 9 years ago

findborg commented 9 years ago

I thought you should know that I was testing the script/css loader out. I found that it is awesome that, even though the script is located at the base of the page the css was loaded in the head. However, the bad part was that there was a delay between page content rendering and css being applied. I am sure that this would not effect css rendering coupled with htmljs. I do not consider this a bug. But, it is an issue..

findborg commented 9 years ago

Here is an example, the difference was I was loading the main css file before.

// Don't load a script if it has already been loaded
html.config.allowDuplicate = true;
   //define styles and scripts path  

html.scripts({ vunit: '<?php echo $BASE; ?>/dist/js/libs/v-unit-min.js', lazysizes: '<?php echo $BASE; ?>/dist/js/libs/lazysizes.min.js',
googlejquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js',
waves: '<?php echo $BASE; ?>/dist/js/libs/waves/waves.min.js', fullpage: '<?php echo $BASE; ?>/dist/js/libs/fullpage/jquery.fullPage.min.js'
});

// Load stylesheet(s)
html.styles({
    'fP': '<?php echo $BASE; ?>/dist/js/libs/fullpage/jquery.fullPage.css'
});
//render scripts  
html.scripts.render('waves').done(function(){  
//Do something when test-library has been loaded  
Waves.displayEffect();
}).then('lazysizes').then('googlejquery').then('vunit').then('fullpage');

//render css  
html.styles.render('fP');  
nhanfu commented 9 years ago

CSS loader is not widely used. It is just a small utils. I think every initial CSS file should be loaded in the head. The dynamic should be loaded after some events.