I am developing an HTML5 game with jQuery. However, sometimes the page hangs up when loading (For now I only saw this happen on Chrome for mac). When it hangs, sometimes there is a string "waiting app cache" at the bottom. The webpage won't respond to any user mouse event during that time. The same will happen even if you reload the page. However, if you go to settings and clear cached images and files, the webpage won't hang on loading again.
I have no idea why this happen. There is no error in the console so I don't know where the problem could be. What's worse, when the webpage hangs it will be hard to even open the debug console. Any ideas or guesses as to why this happens? Thanks in advance!
Follow up, my javascript entry point:
$(window).ready(function() {
middleLayerInitialize();
initialize();
addEventListeners();
});
Here is how I include jQuery:
<link rel="stylesheet" href="./styles/jquery.mobile-1.3.2.css" />
<script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
The two most common reasons for this are (1) you are including jQuery twice or (2) you are loading a ton of html and jQuery has to wait on your html to finish loading. If you download jQuery directly into your directory and include it in the HTML header, it may help.
http://jquery.com/download/
<head>
<script src="jquery-1.11.0.min.js"></script>
</head>
Make sure that you aren't downloading it like below.
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
</head>
And make sure there is only one line including jQuery.
A final option (least likely to help). I don't know your setup, but try:
$(document).ready(function() {
// put all your javascript here.
});
instead of using (window).ready. I say this because you usually don't use (window).ready. You either use what I have written above or
window.onload=function(){SomeJavaScriptCode};
Related
I have a problem with loading JavaScript in Google Chrome.
I've created the separate js file with a simple alert message and then linked it before the end of the body tag.
Google Chrome shows the alert box first then when I click 'ok' the content is loaded.
In other browsers it works fine, I mean the alert box shows at the same time as the content of the web page.
In short, Google Chrome loads the javascript first even when I put the script tag before the end of the body tag.
alert("Hello World!");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Write Your First Program</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="text-vertical-center">
<h1>Write Your First Program</h1>
<h3>JavaScript Essentials</h3>
<br>
</div>
</header>
<script src="js/scripts.js"></script>
</body>
</html>
Do you have any idea how to fix this problem?
Thanks a lot
Your problem is that your script have the tag async, which let it execute whitout taking care of the web page loading state. Remove the async tag, or replace it with defer, which execute the script after the page loading.
In order to prevent any problem with script and html/css loading times conflict, you should encapsulate your Javascript's scripts with window.onload = function() { //code here }. This will guarantee that your whole page is loaded before executing your code.
That is a problem with Chrome. The developers of chrome for some reason have still not corrected that. If you have alert or a prompt pop-up, which is the first thing that user has to interact with in your website, chrome will not load HTML until after the pop-up has been closed.
Try including jquery cdn just above your script tag in body.
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous">
</script>
This will work fine!!
I also had this problem and realized that my Google chrome was just loading the cached version of page(the one before putting my script tag near bottom).
Closing the window and reopening the page worked fine.
async and defer boolean attributes are only helpful when the script is inserted in the head portion of the page. They are useless if you put the script in the body footer like we saw above.
(Refer following article: https://flaviocopes.com/javascript-async-defer/).
I am also facing similar issue and using window.onload = funcRef; with cleared cache also does not work on my google chrome. I have tried all of this with disabling all my browser extensions but in vain.
I was finally able to, not solve, but agree upon a way around - which was - to include a
jQuery CDN
before my javascript script in the body. Hope this helps.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to move jquery code from internal html file to external file and link it in the head of html file, the site is working inside html but when I move the code to external file the link is not working.
HTML head code:
<head>
<link rel="stylesheet" href="/newsite/style.css" title="new" type="text/css" media="screen" charset="utf-8">
<script type="text/javascript" src="./newsite/js/scripting.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
The problem is here:
<script type="text/javascript" src="./newsite/js/scripting.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
You are trying to use jQuery before you loaded the jQuery library. You need to switch these around like so:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="./newsite/js/scripting.js"></script>
Although I don't recommend getting the latest jQuery, you never know what may be deprecated in the future.
If that does not fix the problem make sure you directories are the correct ones. Check the console on your browser for error messages.
If you use Google Chrome, press F12 to open Dev Tools and click on the "console" tab. Then refresh the page. You should see some sort of error as to why your script is not working.
If there is no error, click the "network" tab and look for your JavaScript file. Any files loaded into the page should show up here. If if isn't there, it wasn't loaded, which means you haven't properly added the script tag to your HTML.
If you're running this from a local HTML file, I'm pretty confident your problem is the file isn't being included.
The code to include it should probably be
<script type="text/javascript" src="newsite/js/scripting.js"></script>
or
<script type="text/javascript" src="./newsite/js/scripting.js"></script>
But just starting with a backslash means the current domain's root. Which, if you're running the file locally, will be your C drive (probably).
I say probably because you haven't given much to go on.
Place a console.log(); at the bottom of your script, load your page with the developer tools console open, if you can see your log your script is running, there may be another external JavaScript file or an internal script that is interfering with your script which is stopping it from working, check to see what scripts you have loading in the of your page, have the script that's not working loaded at the bottom of the page so the script is already loaded when the page loads.
Your source directory could be wrong also, when you load your page open up the developer tools and select 'console' to check if you have an error that the file could not be found.
*edit
The console is showing: Failed to load resource: the server responded with a status of 404 (Not Found).
This is the link:http://khaleha3rbi.com/newsite/newsite/js/scripting.js
You need to remove one of the "newsite" folders in that directory link.
I have solved it, the solution was to switch between to lines in the <head> tag.
it was like that:
<script type="text/javascript" src="/newsite/js/scripting.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
I make it:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/newsite/js/scripting.js"></script>
and it works.
Thank you all for help
I think I might be going crazy at this point. I had an ASP page working yesterday, and came in today to Firebug telling me it cannot detect the JavaScript on the page. Love it when things change after not touching them.
So I start trying to figure out what is happening. I tried slimming down the code, this answer, restarting Firefox, saving the page under a new name and loading the new one, and adding a ridiculous amount of code I generally consider unnecessary. I even tried removing everything from the page and changing it to this:
<script>
alert("yay");
</script>
Does not trigger alert, and Firebug says "No JavaScript on this page". I've been looking for explanations for almost 2 hours and cannot figure out what is happening. I know I did not deactivate anything because other pages will show JavaScript and function properly. I also know that no add-ons are causing it.
I am using Firefox 28.0 (also tried on 27.0.1). Opening the page in Chrome triggers the alert.
(Damn I meant to post this as a comment).
As you responded I'll re-popualate...
I create jsfiddle,
<body>
<script>
alert("yay");
</script>
</body>
Also ensure your browser has javascript enabled.
You should follow the instructions on the Firebug's first aid page.
I assume it's either some Firebug setting or a conflict with another extension. (I see at least YSlow and FlashFirebug installed.)
To check that you can create a new profile and just install Firebug.
Closing the tab and opening the same link in a new tab seemed to resolve the issue.
I'm not sure if any of the prior attempts factored in, so I will list them as well. To be clear, none of these worked, but may have paved the way in some fashion.
Restarting Firefox
"Clear Activation List" on Firebug
Save page under new filename and load the new page
Uninstalling add-ons (all of them)
Create new profile and load page on that profile
Add a <!DOCTYPE html> to the top
Add type="text/javascript" to script tags
Add charset="utf-8" to script tags
Add <meta charset="utf-8"> in <head>
I have just realized a major slowdown in my app. I use modal dialogs to load other pages of my site into a pop up. Up until recently these loaded very fast. Lately they are taking a vary long time, about 4 seconds. I did some profiling and it seems that my javascript isn't loading asynchronously, each one waits until the other has completed downloading.
This seems to be the major slow down. Each javascript file is just included in the loaded page like so...
<script src="/js/jquery.ae.image.resize.min.js"></script>
<script type="text/javascript" src="/js/jquery.raty.min.js"></script>
<script type="text/javascript" src ="/js/entry.js"></script>
<script type="text/javascript" src="/js/bjqs-1.3.min.js"></script>
I sort of fixed this by moving these files to the page showing the dialogs, but that seems like a hack, especially when they were loading fast enough in the past. Also, this isn't dynamic javascript so it can be cached, I think the time parameters come from $.ajaxSetup({ cache: false }); but that isn't a recent code addition.
If you want to load scripts asynchronously, async attribute helps:
<script async="true" type="text/javascript" src ="/js/entry.js"></script>
I am using EmbeddedWB (A TWebbrowser extension) to do like a "live preview" of some dynamically generated content.
I am trying to add jQuery into the mix, so I can get some fancy effects going on, however since IE9 always asks "Allow blocked content" for each and every damn page, a dynamically generated one (Webbrowser.LoadFromString) certainly wont be allowed to have fun. To put it simple: It wont allow Javascript execution.
I tried adding a SecurityManager to my TEmbeddedWB, however that did not do it either. I tested my dynamic code in Firefox, and in IE9, and it works (of course, in IE9 I have to allow first, which was how I found it was a security issue).
Is there a painless way to get around this, without having to manually go into IE and tweak something? Or am I completely wrong about the cause of the issue?
EDIT: After trying this article's method, IE does not ask if it should allow stuff anymore, however my script is still not being executed within my TEmbeddedWB/TWebbrowser..
EDIT 2: Okay, by removing the jQuery code, and displaying a plain Alert, I am forced to conclude that JS is now being executed, however jQuery is not.
EDIT 3: Here is the (stripped down) HTML code that my app generates, where jQuery is not working in my EmbeddedWB/TWebbrowser control - however, it works in Internet Explorer 9 itself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="file://C:\jQuery.js"></script>
</head>
<body>
<center>
<p>
Some stuff here!
</p>
</center>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('I Am jQuery!!!!');
});
</script>
</body>
</html>
EDIT4: I have also tried switching the src to a Google Hosted jQuery, and that did not work either. Removing the Metatag did not fix it either. Just letting you know of stuff I tried before you waste time on suggesting it :)
EDIT5: By navigating to a site that uses jQuery (Webbrowser.Navigate) the site was working as expected. However when doing it from my local test.html, or by doing .LoadFromString();, it will not work.
Will not work = jQuery code not executing.
It seems to work if you use correct URL for the jquery.js file:
<script type="text/javascript" src="file://C:/jQuery.js"></script>
<script type="text/javascript" src="file:///jQuery.js"></script>
or a relative path, you can also omit the file:// protocol:
<script type="text/javascript" src="../../jQuery.js"></script>
The above works when you load the HTML from a file. The question is however, if content from memory and javascript from file system is not considered crossing a security context boundary and rejected for that reason by the embedded browser. In that case, embedding jquery directly in the HTML content (using the <script> tag) should work.