Question

http://jsfiddle.net/DerekL/qDqZF/

$('<img/>').attr('src', "http://derek1906.site50.net/navbar/images/pic3.png").load(function() {
    $("body").html("done");
   blah blah blah...
})

我已经在IE 7中使用$("<img/>").load进行了测试，我得到的是：

在律师的陪同下，我明白了：

“无法获取属性'attr'的值：object为null或undefined”

在我的网页上使用时，我得到了这个：

“SCRIPT5007：无法获取属性'slice'的值：object为null或undefined”
jquery.js，第2行，第32039页

发生什么事了？（讨厌IE ......）

Answer 1

确保正在执行加载功能。我最近处理过这个问题。在IE中，加载功能未在缓存的图像上触发。出于我的目的，我能够通过永远不允许图像缓存来解决这个问题。（一个丑陋的解决方案）

例如：

src="loremIpsum.jpg"

更改为：

src="loremIpsum.jpg?nocache=" + new Date().getTime()

“nocache”可以更改为对您有意义的任何内容。

来自jQuery文档：

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load()快捷方式解决的常见挑战是在图像（或图像集合）完全加载时执行函数。应该注意有几个已知的警告。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像“
  http://api.jquery.com/load-event/

Answer 2

在IE中，缓存图像时并不总是触发加载事件。试试这个：

var img = new Image();
img.src = "http://derek1906.site50.net//navbar/images/pic3.png";
if (img.complete || img.readyState === 4) {
    $("body").html("done");
}
else {
    $(img).on("load error onreadystatechange",function(e){
        if (e.type === "error") {
            $("body").html("Image failed to load.");
        }
        else {
            $("body").html("done");
        }
    });
}

此外，请不要忘记等待DOMReady事件，否则如果图片加载速度足够快，$("body")可能还不存在。

<强> jsFiddle

编辑：

我有一个可以帮助简化图片预加载的插件：https://github.com/tentonaxe/jQuery-preloadImages/

Answer 3

所以我在jfidde做了一些快速测试，并取出相关代码并在ie7-8-9中独立运行。他们都跑得很好。我可以放心地说，这段代码不会破坏你的页面。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo by DerekL</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <script type='text/javascript'>
    $('<img/>').attr('src', "http://derek1906.site50.net//navbar/images/pic3.png").load(function() {
        $("body").html("done");
        $("<img/>").appendTo("body").attr("src","http://derek1906.site50.net//navbar/images/pic3.png");
    });
    </script>
</head>
<body>
    Loading...
</body>
</html>

但有些想法：

在文档头中包装任何操作document.ready call中的DOM的脚本。
```
$(document).ready(function(){ go(); });
```
在源代码中搜索该切片调用。如果你试图用.slice（）来操作jQuery集合，它会破坏。 jQuery集合是对象，而不是数组。（可能是也可能不是你的问题）

确保在.load（）方法返回后调用任何试图触摸该图像的代码。一个常见的错误是执行以下操作：

$('<img id="me" />').attr('src', 'my.jpeg')
                    .load( function(){ $(this).appendTo("body"); } );
alert( $('#me').attr('src') );

如果这是页面上唯一的图像，则上述脚本可能会失败，因为appendTo（）被异步调用，并且 后面的代码行已经执行并失败。确保操作该图像的任何逻辑都是从.load（）回调运行的。（正如您在上面的示例代码中所做的那样。）

如果您粘贴其余页面源代码，我可以看看！祝你好运！

Answer 4

首先添加加载事件然后设置img'src
因为即运行速度比设置src时快，“load”事件结束了新的加载处理程序将在下次更改时执行

IE中不支持$（“<img/>”）。attr（“src”，某些东西）.load（） 9？

4 个答案: