javascript crossbrowser new Image()

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.我尝试了"new Image()"和"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,然后alertrc和alert2同时(移动对话框以查看两者)

谷歌浏览器(2.0.172.39):

• 虽然鼠标悬停似乎引发了太多事件,但它在Safari中起作用
• 警报的顺序是alert1,alert2,alertsrc

Internet Explorer(7.0.6001.18000)

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

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

警报不一定按顺序排列的原因是不同的浏览器以不同的顺序加载图像,而alertrc仅在加载图像后发生.如果宽度为0,则检查是否加载图像.

Answer 2

我认为这是一个缓存问题.
当你说image.src = url;的JavaScript立即转到获取图像,如果图像被缓存,那么浏览器将只使用一个缓存,并触发onload事件,现在你说image.onload = function() {};,但onload事件已经解雇了,所以function()不会被调用.

无论如何,这只是我的猜测,我不确定我是否正确.但是,如果我是正确的,你应该能够通过移动解决它image.src = url;下image.onload = function() {};