admin管理员组

文章数量:1406942

/

$('<img/>').attr('src', ".png").load(function() {
    $("body").html("done");
   blah blah blah...
})

There I have tested using $("<img/>").load in IE 7, and what I got are these:

When run in counsel, I get this:

"Unable to get value of the property 'attr': object is null or undefined"

When used in my webpage, I get this:

"SCRIPT5007: Unable to get value of the property 'slice': object is null or undefined"
jquery.js, line 2 character 32039

What happened? (Hate IE...)

http://jsfiddle/DerekL/qDqZF/

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

There I have tested using $("<img/>").load in IE 7, and what I got are these:

When run in counsel, I get this:

"Unable to get value of the property 'attr': object is null or undefined"

When used in my webpage, I get this:

"SCRIPT5007: Unable to get value of the property 'slice': object is null or undefined"
jquery.js, line 2 character 32039

What happened? (Hate IE...)

  • javascript
  • jquery
  • internet-explorer
Share edited Mar 10, 2012 at 6:06 Derek 朕會功夫 asked Mar 10, 2012 at 5:33 Derek 朕會功夫Derek 朕會功夫 94.5k45 gold badges198 silver badges253 bronze badges 3
  • 2 Posting as ment instead of answer since I'm not sure this is the problem. In IE you need to add an element to the DOM before you can attach an event to it, if I recall correctly. – Interrobang Commented Mar 10, 2012 at 5:36
  • But it works on Chrome, Firefox.... why not IE? – Derek 朕會功夫 Commented Mar 10, 2012 at 5:38
  • 1 I ran your fiddle in IE8 and it worked the same as in Chrome. – nnnnnn Commented Mar 10, 2012 at 5:43
Add a ment  | 

4 Answers 4

Reset to default 3

Ensure that the load function is being executed. I recently dealt with this issue. In IE the load function wasn't firing on cached images. For my purposes I was able to get around this by never allowing the image to cache. ( An ugly solution )

ex:

src="loremIpsum.jpg"

change to:

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

Where "nocache" can be changed to anything that makes sense to you.

From the jQuery documentaion:

Caveats of the load event when used with images

A mon challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have pletely loaded. There are several known caveats with this that should be noted. These are:

  • It doesn't work consistently nor reliably cross-browser
  • It doesn't fire correctly in WebKit if the image src is set to the same src as before
  • It doesn't correctly bubble up the DOM tree
  • Can cease to fire for images that already live in the browser's cache"
    http://api.jquery./load-event/

In IE the load event doesn't always get triggered when the image is cached. Try this:

var img = new Image();
img.src = "http://derek1906.site50//navbar/images/pic3.png";
if (img.plete || 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");
        }
    });
}

Also, don't forget to wait for the DOMReady event, otherwise $("body") may not exist yet if the image loads fast enough.

jsFiddle

Edit:

I have a plugin that may help simplify image preloading: https://github./tentonaxe/jQuery-preloadImages/

So I did some quick testing in jfidde, and pulled out the relevant code and ran it standalone in ie7-8-9. They all ran fine. I can say with confidence that it is not this piece of code that is breaking your page.

<!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./jquery-1.7.1.js'></script>
    <script type='text/javascript'>
    $('<img/>').attr('src', "http://derek1906.site50//navbar/images/pic3.png").load(function() {
        $("body").html("done");
        $("<img/>").appendTo("body").attr("src","http://derek1906.site50//navbar/images/pic3.png");
    });
    </script>
</head>
<body>
    Loading...
</body>
</html>

Some ideas though:

  1. Wrap any script in the document head that manipulates the DOM in a document.ready call.

    $(document).ready(function(){ go(); });

  2. Search your source code for that slice call. If you are trying to manipulate a jQuery collection with .slice() it will break. jQuery collections are Objects, not Arrays. (may or may not be your problem)

  3. Make sure that any code trying to touch that image is called after the .load() method returns. A mon mistake is to do something like:

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

If this is the only image on the page, the above script will likely fail because the appendTo() is called asyncronously, and almost certianly after the following lines of code have executed and failed. Make sure that any logic manipulating that image is run from the .load() callback. (As you have nicely done in your above example code.)

If you paste the rest of your page source I can take a look! Good luck!

add load event first then set img'src
because ie run so fast than when you set the src, "load" event was finished
the new load handler will be executed next change

本文标签：

版权声明：本文标题：javascript - $(&quot;&lt;img&gt;&quot;).attr(&quot;src&quot;,something).load() not supported in IE & 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745053601a2639800.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。