I have a full-screen .gif animation that starts when the user accesses the home page and then fadeOut reviewing the page's content. The thing is, depending on the computer and its internet, there is a delay and sometimes the animation end up hiding before it has been fully viewed.
I am using the code below to hide the div that allocates the animation based on the duration it has (around 10s). I don't know if it is possible, but I would like to hide it after it as been fully played/load(not sure) and not after a specific amount of time.
$(".animation").delay(9500).fadeOut(400);
Try placing the code in a separate JS file (or update the current file and test it) and then...rather than using the $(document).ready, use the $(window).load
The window load event will execute after the page is fully loaded, including all the frames, objects, images, etc.
Related
I want to show a GIF as a sort of loading screen, between 2 pages.
But as soon as I click the link, to go to the next page, the GIF freezes.
As if the browser stops any processes other than loading.
Any ideas?
This is a bit of an interesting thing I learned a while ago. The gifs loaded, are animated on the main thread, the same one used by JavaScript. Once the page unloading begins your animation will stop. Your best bet in this situation is to use CSS animations, as they run on a separate thread. Under different circumstances, you would want to use a web worker or something similar to prevent page lockup.
I have a website, with few content. So, it loads fast in the navigator.
I want to load an jquery animation before show the first index.htm.
Sincerely I don't know how implement this idea. I don't want that the user clicks in the animation to continue to the main site. I want make an animation of 'x' time and when it finish, charges automatically the next html, or the rest of the page.
Thanks very much.
Change your page the way that it loads all content at once including the animation. But the main content is hidden (e.g. by inline CSS) and the animation block is shown. Once your animation is done hide the animation block and show main content instead. As simple as that. This also gives browser enough time to render main content while it plays your animation.
Or option 2 - load index.html with animation only and then load content via AJAX while animation is playing into hidden element.
I would provide an example code if i had laptop or PC at hand, but basic sequence should obvious
And what about using frames / iframes? Have a simple page with jquery or any other animation and inside this page have a iframe. When iframe is loaded, hide a animation. When iframe is not loaded - show a animation.
I suppose that you want to display some ads in animation. So, then you can create condition - set min time of displaying.
I have a page that loads images from various sources. Occasionally these images fail to load; perhaps the link has gone dead or whatever. That's fine.
What bothers me is that the browser might take 6 seconds or even longer (I've seen 20 seconds) before it decides that the image has failed to load. During this time the spinning loading wheel in the Chrome tab keeps going and going, making it seem like my page isn't ready.
I've switched my javascript loading from onload to $(document).ready() so at least my page isn't inactive while it waits for the images to load. But it might appear as though it is.
But is there some way to make my page appear "ready" (no spinning wheel) when all it's doing is waiting for the image? Maybe another way to load images? I currently use the img element with src. Or a way to make it give up sooner? Does it really need 6 seconds to decide that an image link is dead?
Not sure if this has a solution. It's a problem that I have seen on a lot of websites, not just mine, but it drives me nuts. I'll often click the stop-loading-x just to make it stop! I'd at least like for my own website to not be like that.
According to my tests, the loading indicator in Chrome does not show for image elements where the loading was triggered by Javascript. Thus, if you don't mind the images not loading with javascript disabled, you could send the img with the src unset, and set it when the page loads. You can store the URL in data-src. The upside is then that you can control when the image loads, if you want to (though you may want to use a plugin for that, like Roullie's answer suggests).
<img width=100 height=100 class="async-img" data-src="http://www.example.com/some.png">
...
$(document).ready(function(){
$(".async-img").each(function(){
this.src = $(this).data("src");
})
})
maybe it can help. lazyload.js
At first this might seem an odd question, but here's my problem. I'm developing a website that on window.load calculates the div positions as it has some dynamic scroll event highlighting (DOM Ready is the wrong choice for this as images and content isn't loaded yet and the calculate div positions are incorrect when the page has fully rendered.) The local assets run perfectly and are optimised for performance, but my problem is that the client wants social media embeds, for instance a twitter follow and facebook like button. Twitter seems to render pretty quickly, but Facebook takes so long and you can literally lag for about 20-30 seconds before the window.load event is ready, which means my navigation then lags and doesn't work properly. I don't know if it's even possible, but is there a way to determine when all local JavaScript files are loaded (these are included before the closing body tag).
Probably. All JavaScript in a page is executed in the order in which the browser encounters it. So when you add a <script> element as the last element inside the <body> element (i.e. at the bottom of the page), this code will run after all other script code has been executed. Also, at that time, the DOM will be finished (no further HTML to process) except for things that callbacks still might do (timers, onload-handlers).
So what you can try is to put a <script> element between your code and the code from Facebook. But that means your DOM won't be ready.
A better solution is probably to start loading the Facebook code in the background inside of onload. That means all the rest of the page is there and Facebook can take its time.
I have a site which uses largeish (60-100k) background images which vary from page to page.
When the user loads the page for the fist time, the page content is loaded first and the background image appears a short time after. This is, I understand, intended behavior in browsers but it makes the page loading look quite "bumpy" on slower connections.
I had thought of hiding the page with a loading "mask" which gets removed by JS when the background image has loaded...but this is still quite an ugly approach.
How could I make it so the page content and the background image appear to the user at the same time?
The best solution here would be to try and find a way to get that image smaller. There are some good compression tools out there. I recommend looking at ImageMagick, some JPEG-specific tools (http://jpegclub.org/) or PNG-specific tools (http://www.aboutonlinetips.com/optimize-and-compress-png-files/).
But to do what you're specifically asking - hide everything on the page until it's ready and then have it load in - you could use jQuery and do something like this:
$(function(){
var bgimage = new Image();
bgimage.src="{your giant image's URL goes here}";
$(bgimage).load(function(){
$("body").css("background-image","url("+$(this).attr("src")+")").fadeIn();
});
});
What this does is it waits until all the elements are loaded on the page and then creates a new Image object. We point the source to your larger image file. When that is finished loading, we change the background to use this newly loaded image, which should load instantly because the browser cached it.
I have fadeIn() there in case you want to hide all of the content on the page until it's ready. This means you should make the hidden.
For some reason fadeIn() works better than show() or simply removing a "hidden" class via removeClass(), if you take that approach. With the latter two approaches the tag seems to resize its height to fit the content of the page which can result in not displaying the background image in its entirety.
Honestly though, I don't really recommend this approach :p
At least, not if you're going to hide all the content on the page until it's ready.
This might be a good approach for displaying the background image only when it's ready, avoiding the partially loaded image being displayed...
A slower load is just the tradeoff for using large images.
A better way would probably be to use jquery and fade the background image in once it has loaded. Also you could try preloading the next image before the user clicks the next page to make it even smoother.
If you delay the content from showing until the image has shown it's just going to irritate your users. They are (probably) there primarially for the information so don't ever touch anything that delays that process.
The exception for this is some arty farty website where people who don't know about websites come on to click on things and they don't care about anything apart from it looking pretty.
You could use data URIs to mitigate this issue in modern browsers and fall back to your current technique for IE 6/7.