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.
Related
I am watching invisionapp website some time ago and i like his website animation, now i want to apply that animation in my html page so, that i am try to find how it's work.
But i am not able to find out how that animation work and which javascripts used by devloper for apply that html page svg animation.(I am asking about invisionapp's website svg animation not invisionapp animation). i am also try by saving web page in local but not work.
if any one know how all that animation work or what js they use then help me to understand that animation.
Here is the link for invisionapp website
You can use your browser's developer tools to dig into the scripts loaded on the page.
Here is what i could gather:
Graphics/animations made in Adobe AfterEffects, exported to JSON with https://aescripts.com/bodymovin/
Greensock Animation Platform (GSAP) with plugins:
Animation
ScrollMagic
EasePack
TimelineLite
TweenLite
CSSPlugin
AttrPlugin
Also jQuery
Then the code controlling all this seems to be in https://www.invisionapp.com/subsystems/landing/assets/js/freehand.min.js
The Developer tools in the web browsers have a 'Performance', you can use it record the events happening the page and try to figure out what script is triggering the event/animation.
It will be still be difficult, because scripts are probably minified and obfuscated.
So, I'm kinda new to jquery, and this is the first time I've had to deal with the issue I'm having at the moment.
I think it's an interference with Wordpress suddenly updating to 3.9 - 3.9.1 or something, though I can't specifically nail it down.
So the way this site works is that I had the boxes with the videos work like they do now, you clicked play and it would pop up in a fancybox and start playing the video.
It still does this - however, it will just show the loader, and not actually load the fancybox.
And before you ask, I could only get it working in the first place with jquery 1.11, due to various conflicts, but now it suddenly wont work at all.
http://ramborg.com/commercial <- You can see the issue here.
The videos shown are mostly Vimeo, I'm pretty sure they all are, but maybe there has been some YT also added, but that wouldn't matter, if the media helper actually worked.
Any ideas, and input would be greatly appreciated, before I just revert down to an older version of WP to make it work again.
EDIT: Appearntly the fancybox will EVENTUALLY load, it's just heavily delayed. It took like 1-2 minutes into a video before it loaded. If you goto Stills the fancybox will load almost right away (it's just an image). It's almost like it wont open the fancybox until the video is done buffering?
EDIT2: From what I can garner from console/inspect in Chrome, is that it's struggling with loading player.js from Vimeo? Is that the error the rest of you see aswell? Any way I could solve this issue?
I just checked. The videos all load promptly, and no errors in the console in chrome. Try loading the page both while logged in to wordpress and logged out to see if there is a difference.
I've a test website on http://insstock.info/xxx/
With two sliders inserted into it:
Nivo Slider
DIV Content Jquery slider (Exact below of Nivo Slider)
second slider is expected to flip the content one by one; the code and scripts are set accordingly!
It is showing no error in Chrome developer tool Console panel!
Can anyone Please help me to making this second slider work?
A couple of suggestions that I run through when I experience this behavior.
1) Clear the Chrome Cache
Chrome caches aggressively and frequently will return stale resources. You can clear the cache either by using Ctrl+Shift+Del, or prevent its use on the page by opening up Chrome Developer tools, clicking the gear icon in the bottom right, and checking "Disable Cache". Then reload the page with Ctrl+Shift+R. This will ensure you have the latest version of your resources.
2) Check the Network tab for any resources which are failing to load
3) Step through your code in the debugger to try to identify where things go wrong.
4) Start removing pieces more and more pieces of your code until you have a very small set that is exhibiting the issue. This is a great strategy for debugging generally, since it is much easier to debug something small than something big.
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.
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.