I have a fancybox 2 .pdf loader working that loads into an iframe. Some PDFs take a little time to render before being sent and I wanted to use the spin.js spinner as a progress bar as the animation is loaded instead of the supplied .gif
i can start the animation up easily enough using the beforeShow event, but i can't see which event to trap when the object is returned from the server. i have tried all events in the documentation, but i can't see one that traps when the pdf is loaded.
you might need to stop the current event and tell it to execute the next function of hiding the spinner
not sure what the id of the spinner is but using jQuery you can
$('#spinner').stop(true,true).hide();
which should stop any current events and cut to the end so you can instantly start a new function on it
Related
I have a PHP based website.
I have used service-workers and manifest.json to convert the website into a PWA.
Now when I launch the PWA from my Homescreen, it works normally like an APP. But, the problem is that since PWAs does not show browser address bar, user has no way of knowing that the page is being reloaded or the next page is being loaded. When they click something next page gets loaded but no loading indicator is shown.
So, now i need to add loading animation while navigating between pages. As all pages are at different URL and their is no master frame.
I'm not able to figure out some solution.
Theory
What you need to do is to show a loading animation at two times in a page's life cycle: at startup and before closing down. If you do that, first page's closing animation will take user to second page's starting animation, and user will be informed by the state of the app.
Practice
1) Starting animation
I think document.ready event of jQuery is a good time to let the user to interact with the page. So the loading animation will be active/shown when the page is loaded. And you will end the animation once the page is loaded and ready for user interaction.
The .ready() method offers a way to run JavaScript code as soon as the
page's Document Object Model (DOM) becomes safe to manipulate. This
will often be a good time to perform tasks that are needed before the
user views or interacts with the page, for example to add event
handlers and initialize plugins.
2) Ending animation
For this, I use onbeforeunload event of the browser.
The beforeunload event is fired when the window, the document and its
resources are about to be unloaded.
onbeforeunload fires automatically when user clicks to a link or otherwise triggers a navigation process. So just by listening to that, you can start your ending animation.
Then ending animation will start as the user triggers a navigation, and will be welcomed by the starting animation of the next page. So there will be transition starting with a user click and ending with next page loading. Just like apps do.
The code
Here's a snippet from the code I normally use;
$(function () {
// page is loaded, it is safe to hide loading animation
$('#loading-bg').hide();
$('#loading-image').hide();
$(window).on('beforeunload', function () {
// user has triggered a navigation, show the loading animation
$('#loading-bg').show();
$('#loading-image').show();
});
});
Here's a fiddle also with complete styles and HTML
Hope that helps.
I have two different pages.
index.html
page2.html
I have a button on index.html which would take us to page2.html,
but its a direct transition. Where as I was looking for a fade in transition to happen when first page switches to second page.
I don't have to come back to first page so we don't need any transition from second to first.
Could anyone please help.
Thank you
There would be three ways to really make this happen. You can't transition from one page to another if the browser is loading the new page in the address bar besides using a fade out and a fade in on the new page. However, there are two other ways to get animation of page loads running. The first of which is completely inadvisable because it uses an iframe and can complicate communication between the frame and the page it's loaded on.
Here are the three algorithms:
Add a fade in animation on the "body" element when the pages first load and make all links on the pages trigger via javascript. When the Javascript navigate function is called, fade the page, and then execute the location change on the animation callback. Since all of the pages have a fadeIn, this would appear that the page is "transitioning".
(inadvisable) - iterate an ID and on each new request, load a hidden iframe above all of the content and give it the incremented ID. also before creating the frame apply an onLoad handler to the frame and make it animate the frame when it's loaded.
Use AJAX to load your content into a container and you can animate it based on when the ajax request starts and gets a response.
I assume you were looking for algorithms, not code samples. Hence the verbiage.
I've got a piece of code that wants to perform a jump to a particular id on the page as soon as the page is ready. I accomplish this by performing a jquery.animate() so that the scrollTop is at my target element.
However, I'm using web fonts, and for some reason the ready event is firing before the web fonts have loaded and been applied. The result is that the animation ends on a position that is often completely unrelated to the actual position of the element I want to scroll to.
I've verified this by opening the timeline in the Chrome inspector, where I see the animation triggering, followed by the web font loading, followed by a re-render which causes my animation target scroll point to become meaningless. I've also confirmed that this issue does not manifest itself when I use a system font.
Could anyone offer some advice? Perhaps there's some sort of event that fires after a web font has been applied?
$(document).ready(...) is triggered when the browser has finished downloading the entire HTML of the page. It is often before the browser has finished downloading the stylesheets, let alone the font files.
Assuming it's loaded from a stylesheet included in the HTML (as opposed to a JavaScript added stylesheet), you should be listening for the window event, rather than the document's load event.
$(window).on('load', function(){
// your resources are loaded
});
Try using .load instead, as .ready is only after the DOM is loaded.
$(window).load(function () {
// run code
});
Here is info regarding why .ready() is NOT what you want:
http://api.jquery.com/ready/
Here is info why .load() (really the Javascript load event) is what you want (it waits for resources to be loaded):
http://api.jquery.com/load-event/
I have a very simple CSS opacity animation that animates some text in a UIWebView when the web view loads. It works great when the body of the HTML is small and quick to render, but for larger bodies, you'll find that the animation runs immediately when the content loads, but the UIWebView is not painted on to the view for another second or so, which means the user misses the animation completely.
So my question is, rather than have the fade animation occur on load, I want it to occur when the web view is actually drawn on to my view, and I don't think there are any Objective-C delegate methods that are called when the web view is drawn, so I'm not sure if this can be done on the Objective-C side.
Is there anyway I can call some Javascript (this way I can add the animation manually) immediately when the the web view is actually drawn on my device, rather than when webViewDidload?
Is there anyway I can call some Javascript (this way I can add the
animation manually) immediately when the the web view is actually
drawn on my device, rather than when webViewDidload
maybe you can inject your javascript after your uiwebview and your html content is loaded? webViewDidFinishLoad this delegate gets called when uiwebview and your html dom tree created.
does uiwebview didfinishload fire for you when page loads? if so, you could use that function in objectiveC to execute js command to start your CSS animation
I have a pretty large form to develop and it could take some time to render (over 5 secs). Now to give the user an indication of something happening I'd like to fire up a lightbox with a simple "page loading" message whilst the rest of the page loads in the background. Once the page is fully loaded I can close the lightbox and the user can continue through the application. Now I know I shouldn't use window.onload to activate this as jQuery's document.ready is quicker and a better solution for this issue but does anyone have any advice on how to do this or if it's possible.
It is better to just add a semi-transparant div to the dom and and make it disappear onload.
Executing javascript-heavy functions (like the lightbox) kind of defeat the purpose of a waiting indicator.
Add a script in the head (after css is included) that opens the lightbox. Last in the body add a script (preferably with an event handler to know that the dom actually is ready) that closes the lightbox :)
document.addEventListener("DOMContentLoaded", function () {
//close lightbox
}, false);