IE9 and head.js loads script twice - javascript

Using Head.js (0.9) and verifying the loading of scripts from IE9, the Network pane of IE9 developer shows that the javascripts are loaded twice.
First time, the script is loaded with HTTP result code 200, thereafter the same script is reloaded with result code 304 (not modified).
However, the script pane and the script block drop down displays the scripts as being loaded twice. This in turn makes one of the scripts (sIFR.js) resetting its global sIFR object.
I'm suspecting the double-loading is causing this.
Note: Chrome and Firefox both work as expected.
Anyone else having seen this odd behaviour?

Related

Endless "loading" of the page due to JQuery script. How to solve it?

My page stays in an endless loading state due to my "emoji.js" script (Google Chrome testing). The endless loading disables the "emoji" smileys from appearing and you see them in their text code. But when I hit the "stop" cross button in Chrome...they appear!
It seems to be a dumb issue but I can't figure out how to solve it! All my others JQuery scrips works fine, don't understand...
My page: http://raphaelmartin.olympe.in/pc/music.html
You have livereload, on a specific port, at the end of the page.
It is injecting code at the end of your page to load this script file:
view-source:raphaelmartin.olympe.in:35729/livereload.js?snipver=1
If you try to access that file directly you will get the same loading forever problem.
Start by removing it until you sort it out :)
If you view the network traffic of your page, e.g. in Chrome's F12 debugging tools, there is a red entry for this JS file, that has a status of:
(failed)
net::ERR_CONNECTION_TIMED_OUT
It seems that the following script is not available:
<script src="http://raphaelmartin.olympe.in:35729/livereload.js?snipver=1"></script>
The inspector showed a Latency time of something around 20 and 40 seconds waiting to load livereload.js, but with no success.

Chrome downloads image even if it's in the cache

I'm using jQuery $("#my-image").attr("src", "/img/...") (and also .css("background-image", "url()")to show some images. I now discovered that Chrome redownloads the file completely every time the page is loaded or even the js is executed. This shouldn't happen. Why is the cache not used? In Firefox it works like it should. Any ideas?

jQuery page pre-loader appears after page is loaded

So on one of my websites I added a jQuery pre loader which works perfectly fine on all pages except my main page.
The page that is causing issues also has a slider jQuery plugin which doesn't seem to work (at first) as well. Basically it seems that for some reason jQuery plugins are only kicking in after page is fully loaded. It happens once, once page gets loaded at least one time (cached) everything works fine.
I experimented with placing scripts in head tag and before closing body tag, no difference.
You can see issue here (click left red button, after that you'll be redirected to /main.php page which is the one causing issues.)
http://freshbeer.lv
I don't think That I'll need to post any code here as I am almost certain it is something to do with positioning of jQuery files (which you can see by inspecting page), but if you think it is something different and you'd like me to post code here, please feel free to ask and I will update my question.
You have these:
<script src="js/placeholder.js"></script>
<script> $('input[placeholder], textarea[placeholder]').placeholder(); </script>
before this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
resulting in these
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: $ is not defined
forgot about this one
GET http://freshbeer.lv/img/loading.gif 404 (Not Found)
These are all in the dev tools console. In chrome in this case, but other browsers have one too.

How to debug lazily-loaded javascripts in Safari debugger

I have a very simple script that lazy-loads javascripts at runtime. There are unknown dependencies on each page, so they are not all loaded until needed.
Like most frameworks, this works by adding a script tag to the document head.
Everything executes fine, but the Safari debugger neither sees the new script tags in the "Elements" inspector, nor shows them in the "Scripts" tab. Errors are reported as occurring on the root document, rather than the proper script.
An obvious workaround is to author and debug everything normally, and then add the dependency loading as a last step. But I would love to know if there is there a better way to lazy-load scripts that makes the debugger happier?
Safari has a setting in the Script tab to pause on exceptions, giving you an interactive debugger at the point in code whenever an exception is thrown, or alternately, only on unhandled exceptions.
It looks like a little octagon with two vertical bars. It's a tri-state button, and the tooltips summarize each state's functionality.
I know that if you lazy load scripts with eval then the firebug debugger has a hack to get at the script.
Normally lazy loaded script can not be accessed from the debugger. You should hard link it and add the lazy loading for production.

Firebug doesn't load JavaScript files or stop execution on breakpoints

I'm new to Firebug and having a lot of trouble.
JavaScript files usually show up empty, or load partially (some of the time)
Lines are not available to set breakpoints on frequently (line numbers are greyed out)
When I do set breakpoints, script execution often does not stop on them
I'm using Firebug 1.3.3 and Firefox 3.0.11. I have disabled all other Add-ons. I'm loading Javascript from localhost. Sometimes closing the window and re-opening the page I was on clears things up, but that never lasts for more than a couple page loads.
I'm working on learning jQuery, which obviously has a huge library, but I imagine many other people use Firebug for the same, so that shouldn't be a problem. Also, most of the time (but not always), Firefox loads and executes the JavaScript no problem; just Firebug can't see it.
Due diligence:
These discussions seem to cover the same problem, but have no answers:
"Firebug not showing Javscript errors" - http ://groups.google.com/group/firebug/browse_thread/thread/443848cd11be48e1?pli=1
"firebug does not always load javascript" - http ://code.google.com/p/fbug/issues/detail?id=1644&q=empty%20javascript&colspec=ID%20Type%20Status%20Owner%20Test%20Summary
(Sorry I'm new, and not allowed to hyperlink those)
A couple suggestions. Make sure that you have the console, net, and script panels of Firebug all turned on.
You should see in the net panel what js files have downloaded. In the console panel, you should be able to type console.log(jQuery) and get back function().
This should confirm that jQuery is actually loaded and running.
Then go to your script panel, and you should see four options across the top. Inspect, Edit, Static, and then a drop down list of your scripts. That's the one you want. Select the script that you want to debug.
Based on your question, you probably know some of this already, but confirm that all of that is working first.
When you don't see jQuery in the scripts list, can you do console.log(jQuery)?
PS. It's not a matter of size. I routinely load js files that are 10x the size of jQuery.
Edit: A few more suggestions:
1) Reduce to simplest case and add back. Remove all your scripts other than jQuery and then add your other scripts incrementally. Is there one that consistently breaks it.
2) Put try / catch statements around suspicious code blocks. I've often found that FB stops reporting errors after an uncaught exception has been thrown.
try {
// your code here
} catch (e) {
console.log(e)
}
3) Setup another FF profile to test if you get the same problem.

Categories

Resources