JavascriptjQuery: How to detect img is fully downloaded or not? - Stack Overflow

admin管理员组

文章数量:1356286

All I need to do is locate image at the center of its parent div.
First, I tried this.

$(document).ready(function() { 
    $('#image1').css({
    'top': 50%, 'left': 50%,
    'margin-top': (-$('#image1').height()/2) + 'px',
    'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
});

It failed cause $('#image1').height() and width() gives 0 before it is fully downloaded.
So I tried to keep inspecting size of the image until it has specific width and height.
like,

function inspectSize() { return ($('#image1').width() != 0); }
function setPosition() {
    if(!inspectSize()) {
        setTimeout(setPosition, 1000);
        return;
    }
    $('#image1').css({
        'top': 50%, 'left': 50%,
        'margin-top': (-$('#image1').height()/2) + 'px',
        'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
}
$(document).ready(setPosition);

Still it doesn't work.
because $('#image').width() returns 28px before it is downloaded in IE8 (by the way, IE7 was fine)

So I finally tried waitForImages jQuery plugin like this,

$(document).ready(function() {
    $('#image1').waitForImages(function() {
         setPosition(); // without inspectSize() 
    });
});

It works fine with cached images, but doesn't work with non-cached images.
The function is called before Image1 has width and height.

What should I do?

All I need to do is locate image at the center of its parent div.
First, I tried this.

$(document).ready(function() { 
    $('#image1').css({
    'top': 50%, 'left': 50%,
    'margin-top': (-$('#image1').height()/2) + 'px',
    'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
});

It failed cause $('#image1').height() and width() gives 0 before it is fully downloaded.
So I tried to keep inspecting size of the image until it has specific width and height.
like,

function inspectSize() { return ($('#image1').width() != 0); }
function setPosition() {
    if(!inspectSize()) {
        setTimeout(setPosition, 1000);
        return;
    }
    $('#image1').css({
        'top': 50%, 'left': 50%,
        'margin-top': (-$('#image1').height()/2) + 'px',
        'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
}
$(document).ready(setPosition);

Still it doesn't work.
because $('#image').width() returns 28px before it is downloaded in IE8 (by the way, IE7 was fine)

So I finally tried waitForImages jQuery plugin like this,

$(document).ready(function() {
    $('#image1').waitForImages(function() {
         setPosition(); // without inspectSize() 
    });
});

It works fine with cached images, but doesn't work with non-cached images.
The function is called before Image1 has width and height.

What should I do?

• javascript
• jquery
• waitforimages

Share Improve this question Follow edited Jan 23, 2013 at 23:00 alex 491k204204 gold badges889889 silver badges991991 bronze badges asked Dec 23, 2011 at 7:56 RonRon 2,79022 gold badges2222 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You should be able to just bind your repositioning callback to the load event handler.

So in your last example:

$('#image1').load(function() {
     setPosition(); // without inspectSize() 
});

Where #image1 points to your image tag. Alternatively, as you mention the #image1 might just be a container then:-

$('#image1 img').load(function() {
     setPosition();
});

Update jfriend00 makes a good point below, in that 'load' will only fire when an image is added to the DOM, not if it already exists on the page at the time your JavaScript is run.

To cover both scenarios, you can do this:

var img = $('#image1');

if (img.prop('plete')) {
     setPosition();
} else {
     img.load(function() { setPosition(); });
}

The prop('plete') check will return true if the image already exists, and if it doesn't we bind the 'load' event handler.

a simple example is to bind the load event to the image. I always do the following

<img data-src="image.jpg" />

note that i don't set the src attribute yet

$(function() {
    $("img").each(function() {
        $(this).load(function() {
            alert('ready to call $(this).width()');
        }).prop("src", $(this).prop("data-src"));
    });
});

the .prop("src", $(this).prop("data-src")); set's the new src after the load event is binded

Try writing the same code inside.

$('window').load(function() {
    // Your code here..
});

本文标签： JavascriptjQuery How to detect img is fully downloaded or notStack Overflow