I have index.html file where I have Jquery library and bootstrap library for js being loaded in <head> tag, they are reported as the reason for render blocking, where, jquery.min.js takes 932 ms and bootstrap.min.js takes 765 ms to load. Here, I decided to load the jquery and boostrap files after loading the page following this article. But since I had other dependent JS files as well, I decided to create a Javascript array and iterate it to create the dynamic script tags. Which is doing its part, but the page doesnt load because other dependent files doesnt find the jquery file.
I believe this is happening because, before jquery.min.js gets loaded completely other files gets loaded and hence it breaks.
Note: since all the js files are from the codebase, It doesnt make sense to use defer or async.
Below is the code I am using in the bottom of the page before </body> tag.
<script type="text/javascript">
var source = [
"common/scripts/external/jquery-3.2.1.min.js",
"common/scripts/external/bootstrap.min.js",
"common/scripts/other/utility.min.js?v=1.0.0",
"common/scripts/external/jquery.ui.widget.min.js",
"common/scripts/external/jquery.fileupload.min.js",
"common/scripts/external/jquery.fileupload-process.min.js",
"common/scripts/external/jquery.fileupload-validate.min.js",
"common/scripts/external/jquery.knob.min.js",
"common/scripts/external/jquery.payform.min.js"
]
function downloadJSAtOnload(source) {
for (var i = 0; i < source.length; i++) {
var element = document.createElement("script");
element.src = source[i];
document.body.appendChild(element);
}
}
if (window.addEventListener) {
window.addEventListener("load", downloadJSAtOnload(source), false);
} else if (window.attachEvent) {
window.attachEvent("onload", downloadJSAtOnload(source));
} else {
window.onload = downloadJSAtOnload(source);
}
</script>
The errors when I load the page:
Please suggest whats the right way to solve the render blocking and if this is the right direction, how I can allow Jquery to load first before every other files get loaded
you should add jquery before this js script:
<script src='common/scripts/external/jquery-3.2.1.min.js' async></script>
<script src='common/scripts/external/jquery.ui.widget.min.js' async></script>
<script src='common/scripts/external/jquery.fileupload.min.js' async></script>
<script src='common/scripts/external/jquery.fileupload-process.min.js' async></script>
<script src='common/scripts/external/jquery.fileupload-validate.min.js' async></script>
<script src='common/scripts/external/jquery.knob.min.js' async></script>
<script src='common/scripts/external/jquery.payform.min.js' async></script>
<script type="text/javascript">
var source = [
"common/scripts/external/bootstrap.min.js",
"common/scripts/other/utility.min.js?v=1.0.0"
]
function downloadJSAtOnload(source) {
for (var i = 0; i < source.length; i++) {
var element = document.createElement("script");
element.src = source[i];
document.body.appendChild(element);
}
}
if (window.addEventListener) {
window.addEventListener("load", downloadJSAtOnload(source), false);
} else if (window.attachEvent) {
window.attachEvent("onload", downloadJSAtOnload(source));
} else {
window.onload = downloadJSAtOnload(source);
}
</script>
I think you should call bootstrap before this script too. check and see if it did not work correctly move the bootstrap.js before the script, too.
Related
I have a JavaScript function placed at the bottom of my page but for some reason the page isn't called on page load. I tried running it on console to be sure it doesn't produce an error, but it ran perfectly fine. I even tried setting the
window.onload = function() {applyMovement();}
That didn't even work.
about.js
function applyMovement() {
let bars = document.getElementsByClassName('progress-bar');
for (let i = 0; i < bars.length; i++) {
moveBar(bars[i], i);
}
}
index.blade.php
...
</body>
<script src="{{ asset('/js/about.js') }}">window.onload = function() {applyMovement();} </script>
</html>
It should be noted that I am using Laravel 5.8. I've placed my JS file inside the public directory. Also other actions on the file are being ran but not this patricular function.
Try placing a new script tag under the declaration of about.js. Like so:
...
</body>
<script src="{{ asset('/js/about.js') }}"> </script>
<script> window.onload = function() {applyMovement();} </script>
</html>
If that didnt work, try the following (bind it to window as a global):
window.applyMovement = function() {
let bars = document.getElementsByClassName('progress-bar');
for (let i = 0; i < bars.length; i++) {
moveBar(bars[i], i);
}
}
I'm trying to run a simple few lines of code using an index.html file and a script.js file, nothing else.
In the HTML file, I have doctype html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<div id="content1">This is content 1 </div>
<div id="content2">This is content 2 </div>
<div id="content3">This is content 3 </div>
</body>
</html>
And for my javascript section i have:
var elems = $("div");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
When I run this in CodePen, or even on the code editor on this website, it works fine. But it doesn't work when I use the files on my desktop (index.html, script.js I do believe the folder structure is correct (script.js is in the javascript folder.)
Thank you all
Move your script tag just before the closing of the body tag:
<script src="javascript/script.js"></script>
</body>
This way the DOM will be available when your script runs.
If you prefer to keep your script in the head part, then wrap your code in a DOMContentLoaded event handler:
document.addEventListener("DOMContentLoaded", function() {
var elems = $("div");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
});
... so to have your code run when the DOM is ready.
You did not tag your question with jquery, but as you seem to use it, you can use this shorter code for doing essentially the same as above:
$(function() {
var $elems = $("div").hide(),
$elems.eq(Math.floor(Math.random() * $elems.length)).show();
});
wrap your code in this function to execute it if the document is ready.
$(document).ready(function (){
// your code goes here
});
I'm trying to run a simple few lines of code using an index.html file and a script.js file, nothing else.
In the HTML file, I have doctype html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<div id="content1">This is content 1 </div>
<div id="content2">This is content 2 </div>
<div id="content3">This is content 3 </div>
</body>
</html>
And for my javascript section i have:
var elems = $("div");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
When I run this in CodePen, or even on the code editor on this website, it works fine. But it doesn't work when I use the files on my desktop (index.html, script.js I do believe the folder structure is correct (script.js is in the javascript folder.)
Thank you all
Move your script tag just before the closing of the body tag:
<script src="javascript/script.js"></script>
</body>
This way the DOM will be available when your script runs.
If you prefer to keep your script in the head part, then wrap your code in a DOMContentLoaded event handler:
document.addEventListener("DOMContentLoaded", function() {
var elems = $("div");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
});
... so to have your code run when the DOM is ready.
You did not tag your question with jquery, but as you seem to use it, you can use this shorter code for doing essentially the same as above:
$(function() {
var $elems = $("div").hide(),
$elems.eq(Math.floor(Math.random() * $elems.length)).show();
});
wrap your code in this function to execute it if the document is ready.
$(document).ready(function (){
// your code goes here
});
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
i have some jquery code which doesn't work when placed inside the head tag but works when placed after the body tag. Even though it is inside document.ready() it isn't working.
Here is my code:
$(document).ready(function() {
for (i = 1950; i <= new Date().getFullYear(); i++) {
$('#from').append($('<option />').val(i).html(i));
$('#to').append($('<option />').val(i).html(i));
}
})
Here is my Structure
< head>
<script type="text/javascript" src="scripts/jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="/easyoffice/js/excelExport.js"></script>
<script type="text/javascript" src="/easyoffice/js/tinytable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
for (i = 1950; i <= new Date().getFullYear(); i++) {
$('#from').append($('<option />').val(i).html(i));
$('#to').append($('<option />').val(i).html(i));
}
})
function checkyear() {
var from = $('select[id=to]').val();
var to = $('select[id=from]').val();
if (from == 'Select' || to == 'Select') {
alert(" Please Select an Year ")
return false;
} else if (from <= to) {
alert(" Please Select an Year greater than From Year ")
$("select#to").prop('selectedIndex', 0);
return false;
} else {
return true;
}
}
</script>
</head>
please check sequence of where you have added yout jquery file in head tag?
it should be
<script src="your_jquery_library_file.js" type="text/javascript"></script>
//Then
<script type="text/javascript">
$(document).ready(function() {
for (i = 1950; i <= new Date().getFullYear(); i++) {
$('#from').append($('<option />').val(i).html(i));
$('#to').append($('<option />').val(i).html(i));
}
})
</script>
I figured out what was the problem. I put the ready function after the <body> tag and now it is working perfectly.
$(document).ready() simply ensures that all DOM elements are loaded before your javascript is loaded.
When it doesn't matter
Without waiting for this event to fire, you may end up manipulating DOM elements or styles that are yet to exist on the page. the DOM ready event also allows you more flexibility to run scripts on different parts of the page. For example:
<div id="map"></div>
<script type="text/javascript">
document.getElementById('map').style.opacity = 0;
</script>
will run because the map div has been loaded before the script runs. In fact, you can get some pretty good performance improvements by placing your scripts at the bottom of the page.
When it does matter
However, if you are loading your scripts in the element, most of your DOM has not loaded. This example will not work:
<script type="text/javascript">
document.getElementById('map').style.opacity = 0;
</script>
<div id="map"></div>
will not, since the map div has not been loaded.
It'll all depend on when certain parts of the code are executed.
If they're in the header, then the elements they are attempting to access might/will* not exist yet.
http://jsfiddle.net/Kh2fz/
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">alert("sfd");
</script>
<script>
var $elements = $('#fp-slides div');
var total_elements = $elements.length;
var element_with_class = 0;
window.setInterval( function () {
$elements.eq(element_with_class).removeClass('current');
element_with_class += 1;
if ( element_with_class === total_elements )
{
element_with_class = 0;
}
$elements.eq(element_with_class).addClass('current');
}, 400 );
this is not working. when i compied its not working... but works just fine in online compiler..
Just put your script after the HTML and it will work!
Download the jQuery javascript file an the css file from the jQuery website.
Then insert this code into your head section of your html site:
<link type="text/css" href="your path /your jQuery css file name.css" rel="stylesheet"></link>
and for js insert:
<script type="text/javascript" src="your path/your jQuery js file name.js"></script>
Look that the path is correct and keep attention for the writing.
then it should work.
greethings