html – Chrome / Firefox内容脚本：在加载图片时隐藏似乎会破坏其他s与相同的src

基本上,此扩展允许在某些webcomic站点上在普通视图和特殊“读取模式”之间切换.为此,它将使用CSS规则隐藏所有现有元素,并创建@R_772_10062@< 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”所以图像加载缓慢,然后将小提琴代码复制到控制台(加上代码加载jQuery),然后使用Enter键播放,它的工作原理！

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

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