App Css Loaded (scroll create link) (ok)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	    var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
	    var app_css_loaded = false;
	    /* console.log(performance.now() + ' - ' + '1. async css script init'); */
	    var loadAppCss = function(){
	        if(!app_css_loaded) {
	            app_css_loaded = true;
	            var l = document.createElement('link'); l.rel = 'stylesheet';
	            l.href = 'styleonce.css';
	            var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
	            /* console.log(performance.now() + ' - ' + '5. script injected'); */
	        }
	    };
	    var cb = function() {
	        /* console.log(performance.now() + ' - ' + '3. cb called'); */
	        setTimeout(function(){
	            /* console.log(performance.now() + ' - ' + '4. timeout start'); */
	            loadAppCss();
	            /* console.log(performance.now() + ' - ' + '6. timeout end'); */
	        }, 3000);
	    };

	    window.addEventListener('load', function(){
	        /* console.log(performance.now() + ' - ' + '2. triggering cb directly'); */
	        if(raf) { raf(cb); } else { cb(); };
	    });
	    var loadAppCssOnScroll = function(){
	        /* console.log(performance.now() + ' - ' + '### triggering cb on scroll'); */
	        window.removeEventListener('scroll', loadAppCssOnScroll);
	        if(raf) { raf(loadAppCss); } else { loadAppCss() };
	    };
	    window.addEventListener('scroll', loadAppCssOnScroll);
	</script>
</head>
<body>
	<div id="content">
		aaaaaaaaaaaaaaa
	</div>
</body>
</html>
// styleonce.css
#content {
  background-color: red;
  width: 100%;
  height: 8900px;
}
PreviousTrigger a CSS animation on scroll xuongkhopbacninh.vn (ok)NextHiệu tứng scroll cực chất (ok)

Last updated