Chrome/Firefox 内容脚本：在加载图像时隐藏 <img> 似乎会破坏具有相同 src 的其他 <img>答案

【问题标题】：Chrome/Firefox Content Scripts: Hiding <img> while image is loading appears to break other <img>s with same srcChrome/Firefox 内容脚本：在加载图像时隐藏 <img> 似乎会破坏具有相同 src 的其他 <img>
【发布时间】：2016-08-16 00:25:37
【问题描述】：

我为 Chrome 和 Firefox 创建了一个插件，现在我注意到一些奇怪的行为。

基本上，此扩展程序允许人们在某些网络漫画网站上的普通视图和特殊“阅读模式”之间切换。为此，它将使用 CSS 规则隐藏所有现有元素并创建一个新的 <img> 元素，该元素插入正文并获取与最初显示漫画的现有 <img> 元素相同的 URL 集。

现在我观察到的行为，顺便说一下，发生在两个浏览器中，是：当您切换模式时，图像仍在加载，奇怪的事情发生了：它看起来像<img> 标签将继续工作（通常是开始加载图像的那个，但并非总是如此），但另一个标签将在用户停留在页面上的其余时间继续显示“损坏的图像”图标。有趣的是，看起来这种情况甚至可能发生在 <img> 标签上，当模式切换时动态创建/删除（不仅仅是显示/隐藏）...

我认为这是一个非常奇怪的行为，我希望隐藏图像不会停止加载，或者在显示具有相同 src 的另一个 <img> 标记时暂停并继续或重新启动它，但不是那样事情就这样破裂了。

相关代码部分为：

var $s, $c;
var setState = function(readModeEnabled, allowScrolling) {
    if($s) {
        $s.remove();
        $s = null;
    }
    if($c) {
        $c.remove();
        $c = null;
    }
    if(readModeEnabled) {
        if(allowScrolling) {
            $s = "<style id='cherry-read-mode'>*{display:none !important;} html,body{display:block !important;width:100%;height:100%;text-align:center;} #cc-comic-2{display:inline-block !important;max-width:100%;}";
        } else {
            $s = "<style id='cherry-read-mode'>*{display:none !important;} html,body{display:block !important;width:100%;height:100%;text-align:center;overflow:hidden;} #cc-comic-2{display:inline-block !important;max-width:100%;max-height:100%;}";
        }
        $("head").append($s);
        $s = $("#cherry-read-mode");
        $c = $("<img id='cc-comic-2'/>").attr("src", $("#cc-comic").attr("src"));
        $("body").append($c);
    }
};

（readModeEnabled 是被切换的。使用那里的 ID 的 $s 技巧只是因为我注意到 $("<style>something</style>").appendTo(...) 没有正确设置样式标记的内容，但 $(...).append("<style>something</style>") 可以。）

我做错了什么吗？那里有什么问题，最好的解决方案是什么？

编辑：我无法重现 jsfiddle 上的行为，这很奇怪。 This fiddle 非常接近它在真实案例中的工作方式，但一切都很好......

EDI2：现在看来，这只发生在扩展程序中！起初我排除了这一点，因为它在 Chrome 和 Firefox 中，并且它们使用不同的渲染引擎和所有东西......但问题是，当我打开 Chrome 时，转到http://sleeplessdomain.com，在 devtools 中启用节流到“Good 2G " 让图片加载缓慢，然后将小提琴代码复制到控制台（加上加载jQuery的代码），然后按Enter键播放，它可以工作！

EDIT3：我现在什至将包括 jQuery 在内的整个内容脚本复制到 devtools 控制台中，然后它就可以正常工作了。所以这似乎是内容脚本的问题，但在 Chrome 和 Firefox 中！

EDIT4：哦。上述编辑的不同之处在于我使用 Enter 而不是 ESC - 在扩展中我将 ESC 作为键绑定。而且我没有意识到它也用于中止页面加载。 e.preventDefault()做到了……我现在觉得有点傻^^

【问题讨论】：

如果您提供一个最小的工作示例和重现问题的步骤可能会有所帮助。 jsbin.com
我会将样式信息放入使用不同类名的 CSS 文件中，然后使用 JavaScript 将此类的添加/删除切换到高级元素（例如 )。我不知道这是否有助于解决您的问题，但最好将样式与脚本分开。
@Billy 奇怪的是，我只是尝试创建一个最小的示例，但它根本没有发生......但它确实发生了。
@MarkP：这是一个扩展，我希望只有在激活此阅读模式时才能修改页面 - 当它停用时，它应该删除所有修改；而且我不想实际修改元素，这就是为什么它只添加两个元素（style + img）并再次删除它们。

标签： html google-chrome firefox

【解决方案1】：

我的测试和真实案例之间的区别在于我使用了 Enter 而不是 ESC - 在扩展中我使用 ESC 作为键绑定。而且我没有意识到它也用于中止页面加载。 e.preventDefault()做到了……

【讨论】：