$(“<img>”). - 码农岛

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

$('<img/>').attr('src', "http://derek1906.site50.net/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

4条回答

狗以群分

2楼-- · 2019-02-19 14:18

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.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");
        }
    });
}

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.com/tentonaxe/jQuery-preloadImages/

0人赞添加讨论(0) 举报

冷血范

3楼-- · 2019-02-19 14:19

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 common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely 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.com/load-event/

0人赞添加讨论(0) 举报

该账号已被封号

4楼-- · 2019-02-19 14:23

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

0人赞添加讨论(0) 举报

Lonely孤独者°

5楼-- · 2019-02-19 14:26

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.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>

Some ideas though:

Wrap any script in the document head that manipulates the DOM in a document.ready call.
```
$(document).ready(function(){ go(); });
```
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)

Make sure that any code trying to touch that image is called after the .load() method returns. A common 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!

0人赞添加讨论(0) 举报

$(“”).

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间