If you look at http://www.sportsdirect.com you will see that when you click on a category whole pages doesnt get refereshed, ie you dont notice any flicker, content above menu doesn't get repainted.
How do i achieve that? Is it only speed or something else? My site locally works fine (most of the time, but sportsdirect gets slight flicker sometimes). Online page gets "refreshed", ie there is 300ms when there is gray screen.
This is something that is very important for a client and i dont know how to fix it.
You should look into AJAX. This allows you to update parts of your page without refreshing the whole page. This will often reduce or eliminate flicker since it does not rebuild the entire page.
A good place to start is Here
Related
When I visit the homepage of my site, the header image at the top of the page loads at 90% width, and then expands to 100% width as the page continues to load. If you scroll down, it looks like all elements that are intended to be full-width, initially load at about 90% of their full width, and then go on to expand.
I am trying to locate where in the code this is happening. I thought it might be in the css style sheet but i'm not having any luck locating it. My best guess is there is some sort of wrapper loading before the image expands?
For more info, the image is being pulled in using the WPBakery Visual Composer plugin. I tried turning off the image parallax, which removed the image entirely.
I'm inspecting the source code, but nothing is jumping out to me (my webdev knowledge is extremely basic). I'm looking for any recommendations for where to look in the code.
I'm not sure what is causing the problem, but the source code can be viewed here: https://dev-nurseregistry.pantheonsite.io/
It seems like something from Javascript is loading after the initial page load.
If you go to Google Chrome dev tools -> Sources -> Then (on the right side) choose Event Listener breakpoints and under DOM Mutation check DOMContentLoaded and reload the page, it will load DOM step by step. On the initial load elements have a bit different style - your div.site-inner is not full width.
When you are clicking that little blue play button on the screen, it goes on another step. After 4 or 5 steps the content goes full width. If you look into the network tab (also in the dev tools) you can see that widgets.js and platform.js were loaded and after those also some images. I'd say that you have to look in your js files for something you load after the initial page load.
When comparing loaded page and partially loaded side to side, it shows vc_section hide-mobile as display: block and vc_section hide-desktop as display: none.
Edit
Just read hungerstar's comment - he shows a bit more of the cause. I just found the result of that cause. Hope it helps.
So I'm working on a mobile website for a client and have added a css loading animation that triggers when users navigate pages or on ajax load.
The animations work fine in Chrome, but in IOS I've found that immediately after triggering navigation (via window.location.href or just clicking an anchor tag), the loading animation just freezes. This happens at the beginning of the call, not after the page is loaded, so there is a decent amount of time where the css isn't doing anything and the site looks like its hung up on something. I'd also add that the animation works when I'm just doing ajax calls.
In the meantime I've set up a delay between when the animation loads and when the navigation actually happens, and it helps somewhat with the look and feel of the site, but its not great.
Any solutions or ideas around why this might be happening?
Animations freezing after navigation is triggered seems to be a general issue with Webkit browsers.
See https://bugs.webkit.org/show_bug.cgi?id=16177
There is a workaround if you can send the request via Ajax/XHR. Then the animation will keep playing. You can trigger the navigation after receiving a 200/ok response from the backend service.
Should you load the entire next page and swap content by Javascript, you may want to pay attention to the browser history API, i.e. add an entry to it for the swapped page.
Apparently there is a workaround if that suits your case: using transform instead of all other properties. See https://stackoverflow.com/a/53178319/647845
My ASP.NET project seems to run the best in Firefox.
Mainly while someone is navigating around the site, Firefox has no blank pages of white screen while the page is changing, and it looks like it's not reloading the top nav bar of the page or the footer/wrap around the partials that go in the middle.
Chrome and Internet Explorer (obviously) not so much. They seem to reload the entire page every time there is navigation performed.
Is there something I can change about my project configuration that would cause this kind of behaviour? I suppose it isn't too important but it would be nice if it looked as good on Chrome as it does on Firefox.
If anyone wanted to see code from a specific place/config in my ASP.NET project I can post it.
Have a look at the following site http://www.soe.gr.
The whole page has been built with CSS Page Builder Magic 2 (projectseven.com).
Every button is a link to a different .html page.
However, I do not know why every button press creates a flash effect in the page, the background changes instantly color and generally it gives an impression of abnormal operation. I have not met any site with such behavior except some pages inside projectseven site.
Do you have any idea why that happens? Is it something wrong with Page Builder Magic approach?
I am new to Web Development world and I want to know if there is any problem with these guys.
Thank you very much
I checked it out, it doesn't behave abnormally at all for all those effects you have there, I checked out the size of one of the images it is about 250kb, then imagine the other images which I assume are of the same size, and they are all going to be loaded when the page loads, you definitely should expect some effect
I have one web page in ASP.NET and I want that page to be disabled until the whole page loading process gets completed.
One way is to activate a lightbox without content that will dim the whole page and then on the body onload event hide that lightbox.
Lightbox is a like having a modal window above the original window, and is used to preview pictures and other content. It could easy be modified to do what you want. Just activate a lightbox with no content and then hide the lightbox when the document is loaded.
This is a strange requirement and I would be interested in finding out your reason for doing this. Is there a problem or error that is ocurring. Perhaps you think the best way to prevent the error is to freeze the UI until the page loads.
I think that you should edit your question and describe what the underlying issue is. There might be a better way to improve your page.
I've seen this done with a simple overlay before.
Basically an iframe and a div that covers the page and has a high z-index is output at the beginning of page render. This is styled so it greys the page out and it also makes everything non-clickable. Then, once the page is loaded, a simple bit of javascript can be used to remove the div and iframe (or just set their styles to make them disappear).
I've also seen people attempt this issue by manually iterating over all controls on the page in JavaScript and disabling them. This is a horrible way to attempt it :)
The jQuery BlockUI plugin is another good option with lots of customization options.