我为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 = "
(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()做到了……我现在感觉有点傻了^^