javascript 跨浏览器新图像()

Question

这个函数有什么问题？它适用于 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”未收到请求。

问题是什么，如何解决？

谢谢。

Answer 1

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

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。