Disable browser 'paint' until *something* is loaded - javascript

I hope this is a question I can ask here ; I know there are rules.
This site https://mylisting.27collective.net/my-city/ (a demo site for a wordpress theme) has a spinner which is visible during page changes.
It seems to me that the browser is restricted from clearing the screen, or beginning to paint the new screen, until some event occurs. The result is that the spinner works beautifully and even on a slow connection the user never sees so much as a flicker between pages.
Can anyone shed any light on how this is achieved?
Many thanks in advance,

This is actually pretty simple. There's a div (main-loader) that sits over the top of the site (the spinner), when the DOM ready event fires, the loader div fades out....
Looking at the code of that page it's simply the below...
jQuery(document).ready(function(e) {
e(".main-loader").fadeOut(750), // <-- This is the loader div
// .....
}

Related

How to refresh a page in javascript without changing scroll location, even for a milisecond

I am using this setTimeout("document.location.reload();", 10000); to refresh the page every 10 seconds. And after reloading fully, it gets back to the original location. But for like 0.1 second, the top of the page is shown. You can see this in the video:
https://drive.google.com/file/d/1LKDyqhFnKRapUY_fEugIS5Te-2tawlmk/view?usp=sharing
As i see it, your images didn't load yet that is why it looks like it jumps up and than down. That is why your top row is visible at the very beginning. Scroll seems to stay at the bottom. Scroll isn't the problem here (as i see it).
I don't know how images are shown (are you using any data in the background to generate output). But solution to prevent top row to be seen would be in CSS. Presetting width and height of 'img' tag.
If you can see i posted two images of the issue.
There can be few ways to fix it. One way I can think of is using 'window.onload'.
I guess you could show page when HTML is fully loaded with all images to stop 'jumping' after each load. It could help.
Maybe this post will help: window.onload vs document.onload
Let me know if this was helpful for you finding solution for a problem.
Detect event refresh in javascript, save the value of x-scroll in a cookie, if cookie exist when reload, put the value of x-scroll to this value

Javascript - changes are made after resizing window browser

I have got infinity scroll plugin on my website. After reaching the bottom I get new products which are as intended. The issue is that some content like "add-to-cart" or "product-price" are not displaying as it should be. For example, there is margins and padding set via js.
I thought that maybe if I bind this js with body element this may work, but I cannot find js that make those changes.(its Magento website)
This is only happening in products that were loaded through infinity plugin. After resizing window everything gets fine.
Why is this happening? Any help is appreciated
search for something like
".addEventListener('resize'"
".resize("
".on( "resize"
in firebug's script tab, you may find the eventlistener method and see what happens when it gets fixed when you resize the page.
generally you will have to provide some more information.anything else is guessing

waitForKeyElements(); - Stop a script firing on a popup in Chrome Extension?

This question is a follow-on to another question which needed asking and warranted a new post, so excuse me if I refer to things which may not be clear without reading the other question.
When using the utility waitForKeyElements() I'm facing an issue in which a div is included inside a small popup contained within the same URL. My extension is currently running on the Twitter site, and my intention is that a div contained on the profile pages (e.g. http://twitter.com/todayshow) gets moved above another div on the page. I'm doing this via waitForKeyElements() because of some loading issues which are resolved by using this utility.
However, on a profile page you can click a link to another users name which pops up a small window (inside the same window/tab, on the same URL) showing some info about them and a few previous tweets. The issue here is that the same div appears on this popup and is then moved to the main page behind the popup window, where it shouldn't be. On a profile page, this can be stopped by plugging in the false parameter to waitForKeyElements(), however on a non-profile page it is still possible to activate this popup which is then moving onto the main page, as the div I wish to move it above on a profile page still exists here, causing clear issues.
I'm wondering if there's a way around this, as bugs in Chrome have stopped me from excluding these pages. So far (just brainstorming) I'm thinking:
on a page where the div doesn't exist to begin with, create an empty one meaning false will handle the issue.
somehow stop the script from firing on a given URL, although due to the way Twitter works this would have to monitor OnClick() and the page URL (I think) which I'm unsure how to do.
stop running when the popup appears, but I have almost no idea where to start with that.
Any help is appreciated. Any necessary code related to this question can be found in the first two links, and the issue I'm facing can be seen by a quick visit to Twitter.
EDIT: When plugging in the false param it works when going directly to profiles via the URL bar, if you're on a profile and use a link to get to a profile, the script isn't inserted and my extension fails. So this would need resolving too, or an alternative method altogether.
I had a brainwave that I could use insertAfter() to insert the <div> I was originally moving in front of, after the <div> I was originally moving. This <div> is not present on the popup, which means that nothing is moved onto the back page when it shouldn't be.
In regards to the previous question, my code is now simply:
waitForKeyElements (
"jQuery selector for div(s) you want to move", // Opposite to what it was.
moveSelectDivs
);
function moveSelectDivs (jNode) {
jNode.insertAfter ("APPROPRIATE JQUERY SELECTOR"); // Again, the opposite.
}
This solves the issue I was having and my extension is now working just fine, however I will leave this question posted in case anybody comes back to it in future.

Spinning wheel when performing location.reload();

I am doing some stuff in my Javascript function and then I have to refresh the page using location.reload();
Is there a simple way with jQuery to show a spinning wheel from the point where the page starts to refresh to the point where the page is loaded?
Thanks for your help.
While there might be a solution to just wrap .reload() call info your own function and show spinner before it I seriously doubt the effectiveness. As soon as you issues navigational request, your browser starts killing loaded resources (that also means images) and that's when all GIF's are going to halt with animation. Well maybe not instantaneous but soon enough to spoil the effect...
If you need to avoid doing Ajax, my approach will be the following
simply show an animated gif as an image just before calling location.reload();
always have the spinner image displayed (first item after your <body> tag, and hide it onload (window.onload / jQuery ready)
there will be some flickering though...
Thanks #Jovan Perovic you found me a solution for this..the load() seems to be very usefull to me..Thanks once again

Navigation bar that doesn't reload

I have what is probably a very stupid question. I have been writing a Ruby On Rails app for the last few weeks, using the excellent Bootstrap/Twitter components to avoid me having to do anything artistic.
I noticed on that site, the navigation bar does not appear to ever reload.
http://twitter.github.com/bootstrap/javascript.html
Clicking on the links at the very top (Overview, Scaffolding, etc) causes the page to change, and the URL to change, but the topbar itself does not appear to reload.
I can't detect anything AJAX-y going on that would do this (using Chrome's dev toolbar etc). I can only imagine that it's:
An optical illusion, and it is reloading just it's so fast I can't see it. But then why does it not appear to reload at the same time as the content?
Some undetectable AJAX going on
Some sort of browser caching going on (can you do that for a rendered page element)
Something completely different
Any thoughts most welcome :)
The boostrap site's navbar does seem to be static during reloads but it isn't some clever js that is doing that. There is no hidden content that is being displayed.
What's happening here is a very fast page load. The guys at boostrap moved all their js links and scripts to the bottom of their html so their pages load faster, they even say that in their html. The pages load so much faster that certain elements like the navbar don't seem to change at all. I tried it on my on site and low and behold the static navbar illusion.
So maybe moving your js and scripts to the bottom of your html can help you achieve the same trick.
The entire page (each tab) is loaded, and hidden when the page loads.
The URL is changed using location.hash when the links are clicked (and JavaScript is blocking navigation).
When the hash is changed, the onhashchange event is ran, and the correct div is shown.
Here is an example: http://jsfiddle.net/uFgtS/ (Well, I guess you can't see the url change. Copy the HTML, CSS and JS into a file and run it.)

Categories

Resources