Chrome/Firefox内容脚本:在加载图片时隐藏<img>似乎会破坏其他<img> s同样的src

Question

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

基本上,此扩展允许在某些webcomic站点上在普通视图和特殊"读取模式"之间切换.为此,它将使用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是什么被切换.$s使用ID 的技巧仅用于因为我注意到$("<style>something</style>").appendTo(...)没有正确设置样式标签的内容,但$(...).append("<style>something</style>")确实如此.)

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

编辑:我无法重现jsfiddle上的行为,这很奇怪.这个小提琴非常接近它在真实情况下的工作方式,但一切都还可以......

EDI2:现在看来这只发生在扩展中!我一开始就把它排除在外,因为它既有Chrome又有Firefox,它们使用不同的渲染引擎和所有东西...但问题是,当我打开Chrome时,请访问http://sleeplessdomain.com,在devtools中启用限制功能为了"好2G"使图像加载缓慢,然后将小提琴代码复制到控制台(加上代码加载jQuery),然后使用Enter键播放,它的工作原理!

编辑3:我现在甚至将整个内容脚本(包括jQuery)复制到devtools控制台中,然后它工作正常.所以它似乎是内容脚本的问题,但在Chrome和Firefox中都是如此!

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

Answer 1

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