重新加载期间的 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 中使用代码。

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

顺便说一下，我同时尝试了 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