Problem with image() object

Question

Look at this script please

var src="some.jpg";
var img = new Image(); 
    img.src = src;
    img.id = "crop_image";
    $("#crop_image").load(function()
    {
     $("#crop_cont").append(img);
    })

why in my .load function i can't access to img element?

Thanks much

UPDATE:

But the following works

$('<img src="'+src+'" />').load(function()
                {
                    var img = new Image(); 
                    img.src = src;
                    $("#crop_cont").append(img);
                })

yes without providing DOM structure how can it display..see my answer too — kobe
– kobe, Commented Nov 12, 2010 at 17:42

Pointy · Accepted Answer · 2010-11-12 17:40:20Z

2

Neither of those two examples really make any sense.

In the first, you create an Image but you don't add it to the DOM. Thus, when you ask jQuery to go find it, it can't because it's not there yet.

In the second, you create a new image tag, which (internally) is going to give jQuery an actual DOM element to work with. However, that call to append your Image object to the DOM seems superfluous. You've already got an <img> so there's no need for another one.

I'd change the second one as follows:

    $('<img src="'+src+'" />').load(function()  {
      $("#crop_cont").append(this);
    });

answered Nov 12, 2010 at 17:40

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alin P. · Accepted Answer · 2010-11-12 17:45:20Z

1

$("#crop_image") will not find your new image because you haven't added it to the DOM yet. Use $(img) instead.

A correct way to do it would be:

var src="some.jpg";
var img = new Image(); 
img.src = src;
img.id = "crop_image";
$(img).load(function(){
     $("#crop_cont").append(this);
});

edited Nov 12, 2010 at 17:45

answered Nov 12, 2010 at 17:39

Alin P.

44.5k13 gold badges79 silver badges93 bronze badges

Comments

meder omuraliev · Accepted Answer · 2010-11-12 17:38:27Z

0

#crop_image, does it actually get appended to the doc? if so when?

answered Nov 12, 2010 at 17:38

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

Comments

kobe · Accepted Answer · 2010-11-12 17:40:35Z

0

you need to provide html to that.right

<img src="" />

Otherwise how can it display

answered Nov 12, 2010 at 17:40

kobe

15.9k15 gold badges67 silver badges93 bronze badges

Comments

ayc · Accepted Answer · 2010-11-12 21:13:17Z

0

image has it's own onload event, it's probably easiest to do something like this

var src="some.jpg";
var img = new Image();

img.id = "crop_image"; 
img.onload = $("#crop_cont").append(img); // event added
img.src = src;

edit: err, I mean the Image Object.

answered Nov 12, 2010 at 21:13

ayc

1043 bronze badges

Collectives™ on Stack Overflow

Problem with image() object

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related