App Js Loaded (ok)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#wrap {
width: 100%;
height: 1000px;
}
#messenger-facebook {
background-color: red;
width: 50px;
height: 50px;
position: fixed;
right: 10px;
bottom: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function($) {
$('#messenger-facebook').click(function() {
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
var app_css_loaded = false;
/* console.log(performance.now() + ' - ' + '1. async css script init'); */
var loadAppJs = function(){
if(!app_css_loaded) {
app_css_loaded = true;
var l = document.createElement('script');
l.src = 'styleonce.js';
var h = document.getElementById('wrap');
h.parentNode.appendChild(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'); */
loadAppJs();
/* console.log(performance.now() + ' - ' + '6. timeout end'); */
}, 1000);
};
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('click', loadAppCssOnScroll);
if(raf) { raf(loadAppJs); } else { loadAppJs() };
};
window.addEventListener('click', loadAppCssOnScroll);
});
});
</script>
<body>
<div id="wrap">
<div id="messenger-facebook"></div>
</div>
</body>
</html>alert('HIihi');Last updated
