CODEWITHSUNDEEP
jqueryimagehtmlloadfilereader
user1812426
user1812426

Reputation: 25

Loaded image in browser doesn't fit properly (html5+jquery)

i'm trying to do something simple, but i have a little problem.

I want to open image in browser, to get real size of that image and then resize image to fit in container (600px). Here is what i've made: http://jsfiddle.net/amok/DUNL9/1/ But here is the problem - sometimes first image doesn't load properly (or fast enough) and i can't get width so this code doesn't run: 

$('#photo').css("max-width", "600px")

Trying to catch the moment when file is fully loaded with:

$('#photo').load(function () {...

, but then each opened image appear in some kind of loop (you can see that in alert popup when you add second image) and don't know how to fix this. http://jsfiddle.net/amok/DUNL9/2/

The second version works fine, just this loop of all old images is little annoying. Hope someone can help me.

Upvotes: 2

Views: 77

Answers (1)

bcolin
bcolin

Reputation: 438

You should have a look at https://stackoverflow.com/a/7306807/587536

$(document).waitForImages(function() {
   // Images Loaded.
   $('#photo').css("max-width", "600px")
});

Upvotes: 1

Related Questions