草庐IT

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

coder 2023-08-11 原文

我为 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()做到了...我现在觉得有点傻 ^^

最佳答案

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

关于html - Chrome/Firefox 内容脚本 : Hiding <img> while image is loading appears to break other <img>s with same src，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36792692/

ampimgcodestrongsectionhtmlgoogle-chromefirefox

有关html - Chrome/Firefox 内容脚本 : Hiding <img> while image is loading appears to break other <img>s with same src的更多相关文章

  1. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  2. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  3. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类

  4. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  5. ruby-on-rails - 没有参数的 `<<`(小于两倍)是什么意思？ - 2

    我在一个我想在formtasticGem中覆盖的方法中找到了这个。该方法如下所示:defto_htmlinput_wrappingdohidden_field_html是什么意思？在第三行做什么？我知道它对数组有什么作用，但在这里我不知道。 最佳答案 你可以这样读:hidden_field_htmllabel_with_nested_checkbox是连接到hidden_​​field_html末尾的参数-为了“清晰”，他们将其分成两行 关于ruby-on-rails-没有参数的`

  6. ruby-on-rails - 找不到 gem railties (>= 0.a) (Gem::GemNotFoundException) - 2

    我已经看到了一些其他的问题，尝试了他们的建议，但没有一个对我有用。我已经使用Rails大约一年了，刚刚开始一个新的Rails项目，突然遇到了问题。我卸载并尝试重新安装所有Ruby和Rails。Ruby很好，但Rails不行。当我输入railss时，我得到了can'tfindgemrailties。我当前的Ruby版本是ruby2.2.2p95(2015-04-13修订版50295)[x86_64-darwin15]，尽管我一直在尝试通过rbenv设置ruby​​2.3.0。如果我尝试rails-v查看我正在运行的版本，我会得到同样的错误。我使用的是MacOSXElCapitan版本10

  7. ruby - Watir 更改 Mozilla Firefox 首选项 - 2

    我正在使用Watir运行一个Ruby脚本来为我自动化一些事情。我试图自动将一些文件保存到某个目录。因此，在我的Mozilla设置中，我将默认下载目录设置为桌面并选择自动保存文件。但是，当我开始运行我的脚本时，这些更改并没有反射(reflect)出来。似乎首选项恢复为默认值。我已经包括以下内容require"rubygems"#Optional.require"watir-webdriver"#Forwebautomation.require"win32ole"#Forfilesavedialog.并打开一个新的firefox实例:browser=Watir::Browser.new(:

  8. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe？ - 2

    考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

  9. Ruby -> 写入二维数组 - 2

    我正在处理http://prepwork.appacademy.io/mini-curriculum/array/中概述的数组问题我正在尝试创建函数my_transpose，它接受一个矩阵并返回其转置。我对写入二维数组感到很困惑!这是一个代码片段，突出了我的困惑。rows=[[0,1,2],[3,4,5],[6,7,8]]columns=Array.new(3,Array.new(3))putscolumns.to_s#Outputisa3x3arrayfilledwithnilcolumns[0][0]=0putscolumns.to_s#Outputis[[0,nil,nil],[

  10. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

    我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

随机推荐