logo标签列表

JavaScript跨浏览器新图像()

javascript
8
这个函数有什么问题？它在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”的alert，而其他浏览器则显示alert1、alertSrc、alert2）。
“Google”链接在Opera、Firefox中运行良好（alert1、alertSrc、alert2），但在Safari中不起作用 - 只显示alertSrc。当有人从Safari点击“Google”链接时，Servlet“/pic/img.gif”不会收到请求。
问题出在哪里？如何解决？
谢谢。
4个回答
10

我的第一印象是你发现了浏览器中一些优化代码，它可以延迟加载未显示的图片。到目前为止：

Safari 4.0.2 (530.19.1)：

  • 对我来说，按照描述工作正常（本地、Google以及当我将事件更改为mouseover时）
  • alerts的顺序是alert1、alertsrc、alert2

Firefox Nightly (3.5.3pre, 20090805)：

  • 按照描述工作正常。有趣的是，一开始它不起作用。尝试将图像加载到缓存中，看看它是否影响测试。
  • alerts的顺序是alert1，然后同时出现alertsrc和alert2（移动对话框以查看两者）

Google Chrome (2.0.172.39)：

  • 与Safari一样工作，尽管mouseover似乎触发了太多事件
  • alerts的顺序是alert1、alert2、alertsrc

Internet Explorer (7.0.6001.18000)

  • 按照描述工作正常（本地、Google以及更改为mouseover时）
  • alerts的顺序是alert1、alertsrc、alert2

请记住，我已经将图像位置更改为http://www.google.com.ar/images/nav_logo6.png，因为我现在没有运行随机图像脚本。

根据这个，我建议您使用不同的图像运行测试，并尝试不存在的图像、缓存中的图像和不在缓存中的图像。

alerts的顺序不一定是相同的，因为不同的浏览器以不同的顺序加载图像，alertsrc仅在图像加载后发生。一个好的检查图像是否已经加载是它的宽度是否为0。

6
我认为这是一个缓存问题。
当你使用 image.src = url; 时，JavaScript 立即去获取图像，如果图像已被缓存，则浏览器将直接使用缓存的图像并触发 onload 事件。现在你说 image.onload = function() {};，但 onload 已经被触发了，所以 function() 永远不会被调用。
总之，这只是我的猜测，我不确定是否正确。不过，如果我是对的，你可以通过将 image.src = url; 移动到 image.onload = function() {}; 下面来解决它。
2

在IE和Safari中尝试此示例，完美运行。

function getImage(url) {        
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url;
    image.onload = function() {alert('ok');};
}
getImage("http://www.google.com.ar/images/nav_logo6.png");
0

我在IE中唯一无法使其工作的方法是使用 new Image() 而不是 document.createElement。这可以通过将 image.src 移动到 onload 函数之后来解决：

image.onload = function() {}
image.src = url;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接