FAQ

Browser Back/Forward Button

What happens when clicking on the “Back” or “Forward” button of a browser?

Results depends on the browser you are using and are related to “back/forward cache”.

A back/forward cache (BFCache) caches whole pages (including the JavaScript heap) when navigating away from a page, so that the full state of the page can be restored when the user navigates back: by clicking on the back/forward button of the browser, or, on some websites, by clicking on a JavaScript-driven back button (this button uses back() method to create the same feature as clicking the “Back Button” in a browser).

Currently only Safari and Firefox support “back/forward cache”. You may like to read the following articles for more details:

• Working with BFCache.
• Exploring back/forward cache for Chrome.

LoftLoader has not changed the default function of a browser, so when clicking on the “Back” or “Forward” button of a browser, the preloader works as it should be:

In browsers that support “back/forward cache”, when clicking on the back/forwad button, the previous/next page will not be reloaded, and the preloader will not appear.

When a browser does not support the “back/forward cache”, the browser will reload the page when the user navigates back/forward, the preloader on the previous/next page will be displayed again because the previous/next page is reloaded.

How about the “Smooth Page Transition” feature?

As we have mentioned in the chapter of “Smooth Page Transition”, this feature will only be triggered when clicking on an internal < a > link on a web page. Clicking on the “Back” or “Forward” button of the browser will not trigger this feature.

• There is no good (safe, clean and suitable for all browsers) solution to detect whether or not the user has pressed the back/forward button in the browser.
• It is generally a bad idea overriding the default behavior of web browser. Client side script does not have the sufficient privilege to do this for security reason.

Height on Mobile Devices

When you check on a mobile phone, you may find that the loader (and other elements such as message) is not vertically centered in the screen when the browser’s address bar/toolbar is displayed. Then, if you scroll down the page and you will see that the address bar/toolbar disappears and then the loader is vertically centered. As shown in the screenshot below:

This is because the default loading screen height is set to 100% of the viewport height. The viewport is the visible area of the device (the toolbar is also in the viewport), so the height of the viewport is fixed.

In LoftLoader Pro v2.3.2, we added a new option: LoftLoader Pro Settings > More > Height on Mobile > Adaptive Screen Height for Mobile Devices. When this option is enabled, the height of the loading screen will be adaptive, which means that when the address bar/toolbar of the browser appears, the height of the loading screen will become: the viewport height – the height of the toolbar. And the loader is vertically centered (see the right side of the screenshow below.)

However, please note: If you enable the Adaptive Height option, the height of the screen will change depending on whether the address bar is displayed or not, which will cause the position of the loader to also change. You may see that the loader moves up or down slightly, especially when you activate the Smooth Page Transition feature.

Therefore, enabling or not enabling the Adaptive Height option has its advantages and disadvantages. We provide this option to users, and you can decide whether to enable this option based on your website situation and personal preferences.