Javascript Retina / HD 显示检测和重新加载期间阻止页面呈现

Question

我的问题主要是关于页面重新加载而不是视网膜检测。我在 head 标签中使用下面的代码进行视网膜显示：

<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>

它正在检测访问者的屏幕类型，然后存储 cookie，如果是视网膜显示屏则重新加载。它的工作没有问题，除了一个。

重新加载功能不会停止页面渲染。因此，您在第一次访问时看到无样式的页面（加载一半）然后刷新。之后，由于存储了 cookie，站点的其余部分一切正常。

很明显，PHP没有提供检测屏幕类型的功能。必须通过JS来完成。但是 JS 没有合适的工具来重新加载/重定向而不加载页面，甚至在 head 中使用代码。

简而言之，我介于两者之间。我希望有人可能会建议重新加载而不在第一次加载时显示任何内容（它甚至显示我放入头部的内联样式）。或者在第一次加载时显示标准图像并允许视网膜浏览其余浏览体验是最好的选择？

顺便说一下，我同时尝试了 reload(true) 和 reload(false)。没用。

更新： 请参阅下面 Marat Tanalin 的回答，了解可能的解决方法和更好的视网膜/高清显示图像使用而不是存储 cookie + 重新加载的解决方案。

在我深入研究之后，我意识到由于 * 缓存方法，生成视网膜图像和标准图像可能并不是所有时间的答案。换句话说，在第一次访问时向访问者显示低质量图像并在刷新后显示高质量图像可能不起作用，因为低质量图像（和脚本）已经缓存。

我决定使用支持 SVG 上传的 1.5 倍单张图片。虽然它不是每个方面的 100% 最佳答案，但比失去可靠性更好的选择。

*我是一名 Wordpress 开发人员，我参考了 WP Super Cache 和类似的缓存方法，但请注意它也可能是其他缓存方法的问题。

Answer 1

本质上，您想要停止呈现页面，直到您拥有运行这个脚本。

这可以使用外部 JS 文件来完成。当浏览器找到一个外部文件时，它会等到运行。另一方面，如果您有一个内联 <script> 标签，那么浏览器将不会等待。

实际上，建议从不阻止页面呈现，以缩短页面加载时间，但出于此目的这是必要的。更多信息可以咨询https://developers.google.com/speed/docs/insights/BlockingJS

Answer 2

与其使用纯 JS 解决方案，通常更好的做法是使用 CSS 进行样式设置，使用本机 HTML 元素进行内容图像，并在需要时使用不显眼的 JavaScript。 Unobtrusive JavaScript 表示即使禁用 JS 网页也能正常工作。

在 CSS 中，只需使用媒体查询。

对于 HTML 中的响应式图片，可以使用标准 PICTURE element, but it's not yet widely supported, so a polyfill like picturefill。

响应图像的另一种可能方法：

始终使用高分辨率图像（不考虑实际像素密度；对于低像素密度显示器的用户来说，会有些浪费流量并提供较低的图像质量）；
或使用 JavaScript 在页面加载时用高分辨率版本替换低分辨率图像。为了防止在高分辨率版本之前加载低分辨率版本，可以将低分辨率版本放入 NOSCRIPT 元素中，然后动态读取内容并提取、修改图像源，并且 NOSCRIPT 元素是通过 JS 替换为 hires 图片。

对于摄影图像，可接受的权衡可能是使用 1.5 倍图像。不过要小心线稿图像（如徽标或方案）：它们通常在 1:1 比例下看起来最好（当一个图像像素恰好对应一个物理显示像素时）并且在使用模糊缩放时可能会出现明显的质量损失。

此外，请考虑尽可能使用 SVG 格式的矢量图像——无论实际像素密度如何，它们都可以在没有质量损失的情况下缩放；但是，在具有常规像素密度的显示器上（例如，与 4K 显示器相比，流行的全高清显示器），与像素完美 1:1 光栅图像相比，它们的视觉质量可能明显较低。

Javascript Retina / HD 显示检测和重新加载期间阻止页面呈现

Javascript Retina / HD display detection and blocking page render during reload

javascript

cookies

retina