草庐IT

javascript 跨浏览器新图像()

coder 2024-07-17 原文

这个函数有什么问题？它适用于 Opera 和 Firefox，但不适用于 Windows 下的 Safari

function getImage(url) {        
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url;
    image.onload = function() {};
}

当我尝试 getImage(' http://site.com/someservlet.gif ') 此图像未加载(因为 someservlet.gif 记录了所有请求) 它适用于 Opera 和 Firefox，但不适用于 Safari。我试过“新图像()” 和“document.createElement('img')”——结果相同。

==========更新: 函数在直接调用时运行良好，从事件监听器调用时问题开始

<a href="http://google.com/" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">google</a>

<a href="#" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">local</a>

<script type="text/javascript">
function getImage(url) {
    var image = document.createElement('img');
    alert('1');
    image.onload = function() {alert(image.src);};
    image.src = url;
    alert('2');
}
</script>

“本地”链接在 Firefox、Opera 和 Safari 中运行良好(但 Safari 显示 alert1、alert2，然后出于某种原因使用“src”发出警报，而其他浏览器显示 alert1、alertSrc、alert2)

“google”链接 Opera、Firefox - 工作正常(alert1、alertSrc、alert2)，但 Safari 不 - 显示 alertSrc。在 Safari 中，您会看到 alert1、alert2 等等。当有人从 Safari 单击“google”链接时，Servlet“/pic/img.gif”未收到请求。

问题是什么，如何解决？

谢谢。

最佳答案

我的第一印象是，您偶然发现浏览器中的一些优化代码推迟了未显示图像的加载。到目前为止:

Safari 4.0.2 (530.19.1):

  • 适用于我，如所述(本地、谷歌，以及当我将事件更改为鼠标悬停时)
  • 警报的顺序是 alert1、alertsrc、alert2

Firefox Nightly(3.5.3pre，20090805):

  • 按描述工作。有趣的是，因为它一开始不起作用。尝试将图像加载到您的缓存中，看看它是否会影响测试。
  • 警报的顺序是 alert1，然后是 alertsrc 和 alert2(移动对话框以查看两者)

谷歌浏览器 (2.0.172.39):

  • 像在 Safari 中一样工作，尽管鼠标悬停似乎触发了太多事件
  • 警报的顺序是 alert1、alert2、alertsrc

互联网浏览器 (7.0.6001.18000)

  • 按描述工作(在本地、谷歌和更改为鼠标悬停时)
  • 警报的顺序是 alert1、alertsrc、alert2

请记住，我将图像位置更改为 http://www.google.com.ar/images/nav_logo6.png因为我现在没有运行随机图像脚本。 基于此，我建议您自己使用不同的图像进行测试，并尝试使用不存在的图像、缓存中的图像、缓存中不存在的图像。

警报不一定按顺序排列的原因是不同的浏览器以不同的顺序加载图像，而 alertsrc 仅在图像加载后发生。一个很好的检查图像是否加载的方法是宽度是否为 0。

关于javascript 跨浏览器新图像()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1238549/

新图javascriptalert警报Safari

有关javascript 跨浏览器新图像()的更多相关文章

  1. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  2. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 强制浏览器下载文件而不是打开文件 - 2

    我要下载http://foobar.com/song.mp3作为song.mp3，而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点？ 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.

  5. ruby - 404 未找到，但可以从网络浏览器正常访问 - 2

    我在这方面尝试了很多URL，在我遇到这个特定的之前，它们似乎都很好:require'rubygems'require'nokogiri'require'open-uri'doc=Nokogiri::HTML(open("http://www.moxyst.com/fashion/men-clothing/underwear.html"))putsdoc这是结果:/Users/macbookair/.rvm/rubies/ruby-2.0.0-p481/lib/ruby/2.0.0/open-uri.rb:353:in`open_http':404NotFound(OpenURI::HT

  6. ruby - 如何在 watir 测试套件结束时关闭浏览器？ - 2

    使用ruby​​的watir测试网络应用程序时，浏览器最后会保持打开状态。网上的一些建议是，要进行真正的单元测试，您应该在每次测试时(在拆卸调用中)打开和关闭浏览器，但这很慢而且毫无意义。或者他们做这样的事情:defself.suites=superdefs.afterClass#Closebrowserenddefs.run(*args)superafterClassendsend但这会导致摘要输出不再显示(诸如“100次测试、100次断言、0次失败、0次错误”之类的内容仍应显示)。我怎样才能让ruby​​或watir在我的测试结束时关闭浏览器？ 最佳答案

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  9. ruby - 检查 Ruby 上的浏览​​器控制台输出 - 2

    如何检查浏览器控制台是否有错误？例如，我用Selenium开发了浏览器(chrome或firefox)，我用SeleniumWebDriver做了一些操作。之后我想知道Web控制台中是否有任何错误。 最佳答案 我试着像这样处理控制台错误:defcheck_console_logconsole_log=@browser.driver.manage.get_log(:browser)ifconsole_log!=nilraise(console_log)endend并将其记录到文件中defwrite_log(file_path)work

  10. ruby - 用于 CSS3 跨浏览器兼容性的 SASS 插件？ - 2

    是否有一个SASS扩展可以采用SASS样式表，找到中性属性(例如border-radius)并为其输出所有特定于供应商的属性(例如-webkit-border-radius等)自动？我真的不想手动创建所有混入，也不想手动编写代码。我确定一定有这样的扩展名，但我找不到它。帮忙？ 最佳答案 有一个非常好的gem可以满足您的需求。它叫做Bourbon它不会用特定于供应商的css替换您的css，因为它可以像SASS一样工作。它基本上是一个正确生成跨浏览器css的mixin集合。 关于ruby-用

随机推荐