If you visit http://www.thebattleforarcadia.com/construction/index.html and open the site in multiple tabs or windows, you might notice the scripts exhibiting delays on the page while including another page that uses Ajax and or JavaScript.
This is especially noticeable when it comes to the mouseovers
Is there any fix for this? I believe that I have organized the JavaScript/jQuery quite a bit, and would like some advice if not code-fixes.
There is no delay as far as I'm concerned. It might just be delaying on your end depending on how fast your computer may be, what browser you're using, and etc.
On my end, it runs just fine. Multiple tabs open, no speed decrease. Unless you weren't specific enough and I'm missing something. Otherwise, the mouseovers are normal and I don't experience any delay within the page.
Related
So I have this vanilla JavaScript code that is running very slow when on certain older mobile devices (like iPhone 5) but runs flawless on newer devices (like iPhone 7). And I'm not talking about load speed, but the actual JavaScript functionality. I'm using a few addEventListener to handle basic stuff like showing and hiding divs, including an overlay div with transparent opacity. When I click the button which has the addEventListener linked to it, it takes sometimes up to two seconds to show and/or hide the divs. Sometimes it won't even do it and I'll have to click the button again. I won't share the entire JS file here, but I can assure it's pretty basic. What I want to know is if there's someway to track the execution speed of the JavaScript code... Like, I'm not sure if it's something in the actual JS code, or it's slow because the brownser is taking a long time to rendering it. Any help is welcome! =)
2 ways that are available:
The developer tools in Chrome, but Firefox is more useful for tracking performance:
Also, try performance.now(), never used it but heard about it. Maybe that will help.
EDIT: You could also check how it runs via breakpointing. You can breakpoint in Chrome and Firefox I believe.
I have a page, which displays two big flash movies (not simultaneously) and switches from one to another quite often without reloading the page. I have started with hiding one movie and displaying another. Like
$('#flash1').css('display', 'none');
$('#flash2').css('display', 'block');
In Mozilla it was ok, as flash1 stopped working and was loaded once again when switching back to flash1. But in IE and Chrome flash continued to work, which caused some lagging. I have tried many things, but the only one successful is to remove unused flash completely like this:
$('#flash1').html('');
$('#flash2').html('html code of flash');
The only thing which confuses me, that flash movies have to be reloaded each time, which causes a little pause when switching from one flash to another, and I think that it would be better if both flashes are loaded all the time, and somehow stopped when not used. Is there any solution to do this or it is better to do like I did it?
This is related to a similar question I have posted about timing issues when tabs are inactive. I was wondering if there is a way to make an inactive tab run all functions at the same speed as if it was active. What would be ideal is some script at the top of the page that applies it to everything in the document.
Sorry forgot to put a link on the related issue to show what it is I am trying to do.
Have placed it below
Error with Javascript / Jquery timing in inactive tabs
Thanks
Gary
I believe that only async events, like setTimeout are delayed for background tabs, I would guess that web workers would not be delayed, so I would suggest using those.
I have a webapp, that when loaded for the first time has a long initialization sequence. Basically it calls an external API to get loads of data which it caches upon completion, using HTML5 localstorage API.
The issue is, it never gets through initialization in Mobile Safari on the first attempt. At around the same point each time, my AJAX calls just stop firing. When I refresh the page, it starts initialization over again, but this time gets through.
If I clear the browser cache and start this process over again, it is always the same. Fail on first attempt, succeed on subsequent refreshes.
I'm aware that there are certain barriers in place in Mobile Safari to prevent large consumption of data unless in direct response to user input (such as the HTML5 audio tag not being able to 'autoplay').
I'm wondering if there is something similar in place for loading web pages for the first time that immediately consume large amounts of data. And by refreshing, Mobile Safari takes that as your explicit permission to do so.
Anyone know?
I suggest you start with a simple, quick-loading base html file, which will give your user something to look at right away -- even if it's just a simple "Loading...".
Then use ajax to get your "loads of data," using window.onload for example. Ideally give your user something to read or interact with so they don't notice the wait, or a progress indicator, to know the site is actually working.
People are impatient, and when faced with a blank screen and the browser loading indicator not making progress, they're going to assume your site is broken within a few seconds.
The certain barriers...to prevent large consumption of data are probably there for exactly this reason, to improve user experience and prevent monstrous web pages.
I'm trying to get add a delay of 1000ms before a person leaved the page. I'm using the beforeunload event to start a jquery animation and would like it to finish before the page leaves.
I'm not concerned with older browsers, IE9, latest safari, chrome and FF4 are all i'm interested in.
Edit: Well I was hoping to implement it when just navigating internal pages. Sure I can make all my internal links a javascript call, but I would have preferred a less brute force method.
Also, I'm not stopping people from leaving the page, not even making them wait a huge long time, 1 second for a fade out? Thats no worse than every game I play fading out when I select quit.
Now had I asked how do I prevent a person from leaving a page, then yes all the "don't do it" would have been deserved.
Firstly, if people want to leave your page, don't put any barriers or difficulties in leaving it. Just let them.
Konerak said it well...
Using a blocking action is acceptable when the user is about to lose data by leaving the page, but using them for animations and gimmicks will quickly annoy your users.
Secondly, you can only prevent automatic closing with a blocking action, such as an alert() or prompt(), which temporary blocks the browser's viewport, waiting for user response.
jsFiddle.
Well I was hoping to implement it when just navigating internal pages.
I know it’s four years later now, but I wanted to point out that, within the bounds you’ve described, you can do this.
$(document).on("click", "a", function (e) {// Listen for all link click events on the page (assuming other scripts don’t stop them from bubbling all the way up)
// Stop the link from being followed.
e.preventDefault();
// Grab the link element that was clicked
var linkClicked = e.target;
// I'm using setTimeout to just delay things here, but you would do your animation and then call a function like this when it’s done
window.setTimeout(function () {
// Simulate navigation
window.location = linkClicked.href;
}, 1000);
return false;
});
It’s still inadvisable:
I suspect it would get annoying to users pretty quickly
Without additional code, this would prevent users from command/control-clicking to open links in a new tab.
8 years later and I'm about to code this for my own website, specifically as a fade between pages. But I'm only going to do this for navigating between pages within my site, and I'm not going to use window.onbeforeunload or window.onclick. I attach a click event handler to specific "buttons" on each page. pointer-events is even disabled for other elements, so the event's element scope is very limited. The code is a switch() statement with cases for each "button". Each button navigates to a specific page within the site.
I don't think this is bad web page or web site behavior. A 1 second delay when transitioning between pages is not going to annoy users. I think you might be able to get 2 seconds or more out of it, if you include the time it takes to load the destination page, which can also fade in gradually in as it loads data.
It's visually elegant, especially compared to typical news/info sites with flex layouts that shift all over the page while they load. Those pages spend 2 or more seconds shifting stuff around before you can read anything.
My site is already filled with CSS and SVG animations, so adding this to the internal page navigation is no sweat for this project. If you limit the element scope of the user events and you make the delays small, this is good behavior, not bad behavior, IMO. Visual elegance has value.
EDIT- As I get into it, I see that for one group of similar pages I can achieve better cross-fading between them by consolidating them into one page. That way I can truly cross-fade between each sub-page instead of fading out one page then fading in another.