jQuery image height/width in Chrome

Question

I'm trying to get the width/height of an image in order to set the width/height of the parent container. This is my code to do so:

var current_img = temp.find(".test-img").attr('src', c['img']).addClass("active-image");

Then I get the image width/height via

current_img.css('width');

The issue I'm running into is chrome loads the jscript before the images, so the function is returning null. So I put together this code:

$(".test-img").each(function (index) {
                        $(this).load(function() {
                            imgwidth = $(this).css('width');
                            imgheight = $(this).css('height');
                                if (imgwidth != "0px" && imgheight != "0px")
                                    $(this).parent().addClass('center').css({'width' : imgwidth, 'height' : imgheight});
                                    });
                    });

This seems to work fine the first time you load the page, but when the function is called it returns null. Also when I open the page locally it seems to work fine but when hosted on my webserver I get this problem.

Here is the page in question: http://swolepersonaltraining.com/testing/sorter/

score 1 · Answer 1 · answered Jun 06 '11 at 05:29

Ok so after a lot of research I was able to find a solution. This isn't perfect but the best I've come up with so far.

var img = new Image(); //create new image
$(img).append("div").fadeIn('fast', function() { //We use the callback function from fadein
    var width = $(img).width(); 
    var height = $(img).width();
});

This work around relies on that fadeIn will only execute the function after the image has been properly loaded. My issue was that I was emptying the div that contained the image and refilling it but it was still cached in the browser. So img.load() didn't do anything since it detected the image was indeed loaded.

From the jQuery documentation:

Can cease to fire for images that already live in the browser's cache

Hope this helps!

score 1 · Answer 2 · edited May 23 '17 at 12:20

1

This may be a duplicate of Get the real width and height of an image with JavaScript? (in Safari/Chrome). There's a thorough write up over there.

edited May 23 '17 at 12:20

Community

1
1

answered Jun 06 '11 at 21:06

RobW

10,184
4
41
40

After more research, I went with Paul Irish's [imagesLoaded()](https://gist.github.com/268257) function: . Works flawlessly. – RobW Aug 14 '11 at 19:50

bjornd · Answer 3 · 2011-06-04T04:48:11.043

0

Using $('img').css('width') you get the value of width property of images's style not the actual image's width, use $('img').width() instead.

edited Jun 04 '11 at 04:48

answered Jun 04 '11 at 04:34

bjornd

22,397
4
57
73

That's what I've been working with. The problem is that it seems still not work with Chrome. Does the image center correctly when you click list view in chrome? It works both in firefox, and chrome (locally) but not when I open it on my server... – mike Jun 04 '11 at 04:41
You use $(this).css('width') to fetch the image width, this is wrong, use $(this).width() – bjornd Jun 04 '11 at 04:45
Actually .css('width') and width() produce a very similar result. If you actually put a break point on line 95, you will notice the next time the script is called the .load function is executed even though the images haven't loaded yet. So the problem is with jQuery not recognizing that the images have been emptied. Maybe I have to use a different function than .empty() – mike Jun 04 '11 at 04:49

jQuery image height/width in Chrome

3 Answers3