如何确认通过jquery在DOM上插入的图像是否已完全加载

Question

I looking for a help on this:

I have a piece of code into a variable that I place into a div using jquery, after I place the conde on that div I redirect the page to another URL, now here is my problem: That code content an image, I need to redirect the page when I am sure that the image is complete loaded into that div, since this is a cross-domain I can not use .load (jquery), Any suggestion how can I do to confirm that the image was complete loaded so I can redirect after that confirmation?

<div id="trackBeaconContainer"></div>

var trackBeacon = "<div id='beacon_08d6ab8d99' style='position: absolute; left: 0px; top: 0px; visibility: hidden;'><img src='http://domain.com/openx/www/delivery/lg.php?bannerid=4&amp;campaignid=3&amp;zoneid=2&amp;loc=1&amp;cb=08d6ab8d99' width='0' height='0' alt='' style='width: 0px; height: 0px;' /></div>"

$j("#trackBeaconContainer").html(trackBeacon);

window.location = "http://otherurl.com"

Answer 1

Use the image load event

$j("#trackBeaconContainer")
    .html(trackBeacon)
    .find("img")
        .load( function() {
            window.location.href = "http://example.com";
         });

Answer 2

您可以使用img标签的onload事件

<img src='http://domain.com/openx/www/delivery/lg.php?bannerid=4&amp;campaignid=3&amp;zoneid=2&amp;loc=1&amp;cb=08d6ab8d99' width='0' height='0' alt='' style='width: 0px; height: 0px;' onload='window.location="http://otherurl.com"' />