Question

背景

我为FLIF图片格式创建了一个Javascript解码器。由于它是一种新的格式，浏览器还没有支持它（如果有的话），我们想在JS中为它创建一个poly-fill。

我们有一个基本版本already working。它查询Initializing emission... Item{name='First'} Item{name='Second'} Initializing emission... Item{name='First'} Item{name='Second'} Item{name='Third'} Item{name='Fourth'}元素并将FLIF图像渲染到其上。

但是，对于没有启用Javascript的用户，该解决方案无法正常运行。他们看到一块空白的画布。

问题

我们想知道是否有办法允许在HTML中指定canvas个元素作为后备，但阻止它们通过javascript加载，以便我们可以用我们的FLIF画布替换它们？

我尝试添加各种事件侦听器，例如<img>，并删除其中的DOMContentLoaded元素，但到那时为时已晚;浏览器开始提取图像。

Answer 1

您无法阻止现有<img>代码在src中对资源集进行请求，因为该元素必须存在才能使用脚本进行定位，然后才能请求已经提出。

注意：由于99％的网络需要再次启用脚本，因此您可以将<img>包裹在<noscript>标记中

Answer 2

在这种情况下，您无法阻止请求标准图像元素，因为在您可以访问之前知道这样的元素是否存在是必要的。虽然您可以尽快删除/隐藏/ etc元素，但从用户端开始，图像将永远不会显示。例如：

<img id="foo" src="..." />
<script>
   document.getElementById("foo").remove();
</script>

Answer 3

您可以将<img>标记放在<noscript> block内。

我刚刚使用Chrome进行了测试，并且它没有尝试加载块内的图像（当然，除非Javascript被禁用）。我不知道每个浏览器的工作方式是否相同，但有些浏览器可能仍会尝试下载图片。

Answer 4

我发现这有点hacky，但另一个选择是为img标签添加一些额外的信息，然后从你的poly-fill中添加一些CSS以避免显示图像。

示例HTML：

<img src="image.png" data-polyflif-src="image.flif">

在poly-fill中生成的示例CSS：

// Add CSS to avoid images marked as flif being showed
document.write("<style>img[data-polyflif-src]{display:none;}</style>");

// Once DOM is loaded generate the canvas element and content after every img tag (optionally remove the img or whatever)
...

有没有办法拦截和阻止<img/>元素的图像加载？

背景

问题

4 个答案: