Javascript Retina / HD rendering and blocking page rendering during reload
My question is pretty much about page reloading, not retina detection. I am using the following code in the header to render the retina:
<script type="text/javascript">
if( document.cookie.indexOf('device_pixel_ratio') == -1
&& 'devicePixelRatio' in window
&& window.devicePixelRatio == 2 ){
var date = new Date();
date.setTime( date.getTime() + 3600000000 );
document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio;
//if cookies are not blocked, reload the page
if(document.cookie.indexOf('device_pixel_ratio') != -1) {
window.location.reload(true);
}
}
</script>
It detects the visitor screen type, then saves the cookie and reloads if it displays retina. It works with no problem except for one thing.
The restart function does not stop the display of the page. Because of this, you see an unmanaged page on the first visit (half loaded), then refreshes. After that, everything will be fine for the rest of the site from the moment the cookie is saved.
Obviously PHP does not provide a function to detect the screen type. This should be done via JS. But JS doesn't have a proper tool to reload / redirect without page load, even the code is used in the head.
In short, I am stuck in between. I hope someone might have a suggestion for reloading without showing any content on first load (it even displays the inline style I put in my head). Or displaying standard images on first load and allowing retina for the rest of the viewing is the best option?
By the way, I tried reload (true) and reload (false). It did not help.
UPDATE: . Refer to Marat Tanalin below for possible workarounds and best solutions for using retina / HD imaging rather than saving cookie + reloading.
After digging deeper into this, I realized that generating both retina and standard images may not always be the answer due to caching techniques. In other words, displaying low quality images to visitors on the first visit and displaying high quality images after refresh may not work because low quality images (and scripts) are already cached.
I decided to go with 1.5x single image size with SVG loading support. While this is not 100% the best answer for every aspect, it is a much better option and then lose reliability.
* I'm a Wordpress developer and I call WP Super Cache and similar cache methods, but I know this can be a problem for other caching methods as well.
source to share
Essentially, you want to stop the page from rendering until you run this script.
This can be done using an external JS file. When the browser finds the external file, it will wait for it to launch. On the other hand, if you have an inline tag <script>
, the browser won't wait.
In fact, it is recommended to never block rendering of pages to improve page load times, but it is necessary to do so. For more information, you can refer to https://developers.google.com/speed/docs/insights/BlockingJS
source to share
Instead of using a pure-JS solution, it's usually better to use CSS for styling, native HTML elements for content images, and unobtrusive JavaScript if needed. Unobtrusive JavaScript means the web page works even if JS is disabled.
In CSS, just use Media Queries.
There is a standard element for responsive images in HTML PICTURE
, but it's not yet widely adopted, so the polyfill picturefill .
Other possible approaches for responsive images:
-
using high resolution images at all times (regardless of the actual pixel density, will waste some bandwidth and provide lower image quality for users of low pixel density monitors);
-
or using JavaScript to replace low-res images with their high-res versions on page load. To prevent the low-res to high-res versions from loading, the low-level can be placed on an element
NOSCRIPT
, the content of which is then dynamically read, and the image source is retrieved, modified, and the elementNOSCRIPT
is replaced with the renter's image via JS.
For photographic images, an acceptable compromise may be to use 1.5x images. Be careful with lineart images (like logos or diagrams): they usually look best at 1: 1 scale (where one pixel in the image exactly matches one physical pixel on the display), and loss of quality can occur when scaling with blur.
Also, consider using SVG vector images whenever possible — they are scaled without loss of quality regardless of actual pixel density; although on monitors with normal pixel density (for example, popular Full-HD monitors versus 4K monitors), they may have noticeably lower visual quality compared to 1: 1 bitmaps.
source to share