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

概述我为Chrome和Firefox创建了一个插件,我现在注意到了一些奇怪的行为. 基本上,此扩展允许在某些webcomic站点上在普通视图和特殊“读取模式”之间切换.为此,它将使用CSS规则隐藏所有现有元素,并创建一个新的< img>插入到正文中的元素,并获取与现有< img>相同的URL集.最初展示漫画的元素. 现在我观察到的行为,顺便说一下,在两个浏览器中都会出现这样的情况：当你在图像仍在加载时 我为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;@R_404_1847@;} #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()做到了……我现在感觉有点傻了^^

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

以上是内存溢出为你收集整理的html – Chrome / Firefox内容脚本：在加载图片时隐藏似乎会破坏其他s与相同的src全部内容，希望文章能够帮你解决html – Chrome / Firefox内容脚本：在加载图片时隐藏似乎会破坏其他s与相同的src所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。