如何从CSS或JS将WebKit宏更改为false

Question

用于加载Safari技术预览版26中异步引入的大型图像的新WebKit功能会导致基于mjpg-streamer网络摄像头的流闪烁，默认为true的布尔属性largeImageAsyncDecodingEnabled会导致此问题。 Link to the property definition

我试图找到一种方法来使用CSS或JS在html页面上将此属性设置为false。这甚至可能吗？或者还有另一种方法吗？

这适用于为3D打印机服务器运行OctoPi的OctoPrint。我通过反复试验发现，任何超过453x453像素的图像都异步加载并导致闪烁发生;它类似于恼人的闪光灯效果。我使用的分辨率为1280x720用于网络摄像头，技术预览26之前没有问题。

感谢您的帮助！

Answer 1

Safari Tech Preview 37. https://trac.webkit.org/changeset/219876/webkit/现已解决了这个问题

Answer 2

您无法覆盖宏。但是您可以在加载图像后强制加载页面的其余部分。

By using CSS/JS? Why? Use plain HTML

存在link rel preload标记。阅读更多here on W3C

重要的部分是

链接元素上的preload关键字提供了声明性提取原语，该原语解决了启动早期提取和将提取与资源执行分开的上述用例。因此，preload关键字用作低级原语，使应用程序能够构建自定义资源加载和执行行为，而不会从用户代理隐藏资源并导致延迟的资源获取惩罚。

如何实现这一目标

<!-- preload stylesheet resource via declarative markup -->
<link rel="preload" href="url" as="image">

<!-- or, preload stylesheet resource via JavaScript -->
<script>
  var res = document.createElement("link");
  res.rel = "preload";
  res.as = "image";
  res.href = "url";
  document.head.appendChild(res);
</script>

如果负载成功，queue a task到fire a simple event在load元素上命名为link。否则，queue a task到fire a simple event在error元素命名为link。

如果通过预加载链接获取资源并且响应包含no-cache指令，则获取的响应将由用户代理保留，并在以后使用匹配的相同导航请求获取时立即可用

Update

基于评论讨论我们hade，

你有2个选择。 1.尝试将img标记更改为video，因为该问题仅影响img标记。

请使用以下代码

$(document).ready(function(){
  var newTag=$('img')[0].cloneNode(true);
  newTag = $(newTag).wrap("<video></video>")[0].parentNode;
  newTag = $(newTag).wrap("<div></div>")[0];
  newTag = newTag.parentNode.innerHTML;
  newTag = newTag.replace("img","source");
  $('img').replaceWith(newTag);
});

2. 强制用户选择其他浏览器。也就是说，如果您通过使用window.userAgent检测到它是Safari技术预览26，那么将它们导航到另一个页面，说明由于兼容性问题，不支持此版本的浏览器。请降级/选择其他浏览器。 - 请注意，这可能是暂时的。由于它是一个已知问题（闪烁），它们将在未来提供修复。

---

特别感谢To markdown在几秒钟内将HTML转换为Markdown（我没有任何关系）

Answer 3

我看不到任何客户端黑客不会变成一个完整的建设。你可能能够破解它，但向WebKit报告似乎是最好的方法。

WebKit-bug 170640阻止了largeImageAsyncDecodingEnabled的启用。它也导致了闪烁。一旦修复，他们默认启用它。然而，这表明仍然存在问题。

---

从GitHub检索的HTTP标头

如果有人决定向WebKit提交错误报告，这可能会有所帮助。

标准标题如下

MJPG缆/ MJPG缆-实验/插件/ output_http / httpd.h中

#define STD_HEADER "Connection: close\r\n" \
"Server: MJPG-Streamer/0.2\r\n" \
"Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
"Pragma: no-cache\r\n" \
"Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"

然后是实际的图像流：

MJPG缆实验性/插件/ output_http / httpd.c＃L466

sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
        "Access-Control-Allow-Origin: *\r\n" \
        STD_HEADER \
        "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \
        "\r\n" \
        "--" BOUNDARY "\r\n");

---

小编，WebKit中似乎已经有一个设置/切换来启用和/或禁用largeImageAsyncDecodingEnabled，请查看here。我怀疑这可以通过Safari的用户界面访问，并且没有用户交互就无法解决问题。