html - Chrome/Firefox 内容脚本 : Hiding while image is loading appears to break other s with same src

Question

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

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

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

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

相关代码部分为:

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”以便图像加载缓慢，然后将 fiddle 代码复制到控制台(加上加载 jQuery 的代码)然后使用 Enter 键播放，它有效!

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

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

Answer 1

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