Javascript code loading issue with IE7 and IE8 - javascript

The website in question is cpavalet.com
My javascript loads fine on all browsers except ie7 and ie8. For a few hours now I have been trying to debug the issue to no avail.
I am using jQuery and modernizr, and using the supersized library for the full-sized background images.
The weird thing is, sometimes when I load the page it loads correctly, other times the javascript doesn't work on the page. I think it has to do with the order the scripts are loaded. I am using document.ready for my jquery scripts.
Can anyone shed some light as to why it's not working correctly in ie7 and ie8? I am currently using ie8 for testing purposes.
I am using javascript for: image slider on home page, full-size background images, back to top link to slide to the top, and form validation.
Thanks!
Corey

My guess as to why it wasn't loading correctly was partly correct. I thought that it was because of the order I had my scripts being run on the page.
The answer is that I was using the defer attribute when loading my scripts. When I removed the defer attributes, the scripts started working correctly again.

Related

Firefox browser loading AngularJS app slowly

My Angular JS app is loading slowly on Firefox browser. As a result of this, some of the hidden elements are showing up on the page during page load before getting hidden again. I am using AngularJS material also. I tried moving the script tags to the head. This is fixing the issue in Firefox but in Chrome it is loading slowly. Any suggestions on how to fix this?
For hidden elements, try ng-cloak
If you look at the developer tools, you can see that some browser-extensions can increase page load time also... best to compare without any browser extensions in both browsers

Loading gif is not animating?

On a clients webpage, the page uses js/css to style a tree-style view to the desired look of the client. But on some of the pages with many objects it takes some time for the styles to load. So I suggested adding a loading screen.
Here is an example of the issue: http://zamozuan.com/content/16-search-auto-parts-by-vehicle-chevrolet
My client purchased a little animated icon they like that fits the theme of their site nicely.
I have a very simple addition to the script to add a loading icon, and then on $(document).ready, hiding the load element and showing the main element.
All works fine except the loading gif is not animating until AFTER the page has completely loaded.
It seems that the loop for the js is too intensive so the gif is not animating.
Before anyone chops my head off, I did view the similar questions on here, but those solutions do not work for me - the majority of issues are in IE and my issue is in chrome (not IE), and most of the other options are work-arounds based on clicking buttons to enable/disable, but in my case this is when the page initially loads so that is not viable.
I am wondering, is there any work-around to fix this? Is it possible to pre-load the gif in to an animated status and somehow prevent JS from interfering? Or is there a way to make the js loop not be so intensive that it completely freezes the browser?
As for the code, it is the exact as the link above, with only this added at the end:
$('#loading').hide();
$('.mainsearch').first().css('display', 'block');
The loading element just contains:
<img src="img/loading.gif" class="img-responsive">
<p class="centertext">Loading, please wait...</p>
But as mentioned, the gif does not load, just freezes.
For the javascript that is styling the tree, you can view it here:
http://zamozuan.com/js/tree.js
Any help would be greatly appreciated, as my client would not want to waste this loading icon they bought.
Thanks.
No, there is no work-around. It's not a problem with how the image is loaded, it simply won't be animated while the script is running.
Javascript is single threaded. As long as a script is running, there is no visual updates in the browser. This includes GIF animations, while the script is running animations won't move.
Without being able to work on the actual code and try it, I would suggest trying to break up your looping into separate callbacks. Maybe using setTimeout or requestAnimationFrame for every few recursions to give the browser a chance to update/paint.

Javascript issues in Safari and Internet Explorer

The problem is that the slider on the home and products page only works with firefox chrome and Opera. It just fails to move in either IE or Safari. The second issue is about how the site scales on mobile devices. I've looked into mobile event handling, but with less than great results.
http://dextersaltmedia.net78.net/
Copy-pasting the entire responsiveslides.jquery.js file into the console makes the thing work normally, so your problem is in
<script type="text/javascript" src="responsiveslides.min.js"></script>
The only issue is that the library module never runs, even though the library gets included as a file.
Put your script tags at the end of the page, that might work better. Or try placing the library script tag at the end alone.
Ideally though, you should just bunch up jquery and the library file in one .js file and include that one.

Images are streatched in the blog

I have a blog which has few posts with images. Recently a few weeks ago, I found that the images of the home page are streatched as follows which were absolutely fine before.
Is this a problem with CSS3? I am not much aware of that. How can I edit CSS and Solve this issue? My blog is http://insiderattack.blogspot.com/
Thank you.
Your images are initially fine and not related with css, instead it's because of some javaScript file that you have probably added recently, try to disable JavaScript and load the page with JavaScript disabled, it looks fine. Here is an image of your site, i've loaded it with JavaScript disabled from Google Chrome browser.

How can i stop IE hanging whilst loading Facebook Social plug in (Like box) on my site?

I have implemented the Facebook like button on my site by using the asynchronous JS SDK and it's working great! However it takes a long time to load, which is not a great problem (Would be nicer if it loader quicker though..) as the rest of the page loads fine.
However, if your view the the site in any version of IE the whole page is unresponsive until Facebook Like / comments have loaded... All the images and other scripts are loaded, but the whole page is locked.
Any ideas on how i can rectify this for IE users?
I have seen this post: How do I keep the Facebook like button from delaying the loading on my website? but this was solved by using the Async version, where as mine IS using this and still hanging?
If it helps I can post a link to my site / page that it appears on?
Well, my only advice here is to place your FB JS code just before the </body> tag. But I have other "tips" for your site in general.
Try to minify/combine your CSS and JS files when possible
Try moving your JS code to the body tag (at the end)
Do you really need the Prototype AND jQuery libraries?! try removing one of them and port the functionality to the other (almost all tasks can be done with either library)
In the end, IE was hanging because I had a CSS3 transform on my images and apparently this slows down IE (Even though it cannot render the transform. So i can disable by this via conditional comments in the CSS or in my case modernizr.

Categories