1

I am trying to load images through ajax call in jquery using This here. its not working at all and I am not sure what I am doing wrong, I am using firebug and do not see any request. Any help would be appreciated.

  var img = $('<img  />').attr('src', thumbnailUrl).load(function () {
                    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                        alert('broken image!');
                    } else {
                        $("#imageHolder").append(img);
                    }

                });
Community
  • 1
  • 1
user516883
  • 8,868
  • 23
  • 72
  • 114
  • Is your thumbnail a valid url? Can you copy it's value from firebug and go to it? If yes, could you recreate this in http://jsfiddl.net? That would make it easier to diagnose. – JesseBuesking Dec 13 '11 at 21:24
  • It seems to be working correctly for me. What value are you using for thumbnailUrl? Have you put this into a $(document).ready function? – Brian Hoover Dec 13 '11 at 21:31
  • Looks like it is not appending to the imageHolder. I debugged in firebug and it looks fine but just not appending. and yes the image exist – user516883 Dec 13 '11 at 21:43

1 Answers1

2

You will want to set the load event handler before setting the src so that the load event handler will definitively be set before the image actually loads:

var img = $('<img  />').load(function () {
    $("#imageHolder").append(img);
}).error(function () {
    alert('broken image!');
}).attr('src', thumbnailUrl);

Here is a demo: http://jsfiddle.net/Y2SWB/

Notice I also added a .error(function () {...}) call rather than handling errors within the load event handler.

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • Looks like it is not appending to the imageHolder. I debugged in firebug and it looks fine but just not appending. – user516883 Dec 13 '11 at 21:41
  • @user516883 It works in the demo; do you have multiple elements with the `imageHolder` ID? Or is this being done in a loop? – Jasper Dec 13 '11 at 21:50
  • The element calls a function, that function then, opens a dialog, on the open function of the dialog, i want to load the thumbnail picture, I set up some alerts on your code, and the var img returns [object object]. And also it does not call the ajax, there is no errors or anything. This is strange. – user516883 Dec 13 '11 at 22:05
  • @user516883 That is the correct response for `alert`ing the `img` variable since it is a jQuery object. I however recommend using a developer console (like FireBug) because if you `console.log(img)` you will get more useful information, like the HTML element attached to the object. Also there isn't any AJAX code in my answer, are you referring to some AJAX in your dialog code? – Jasper Dec 13 '11 at 22:07
  • ok i did an alert after the appending (alert($("#imageHolder").html());) and it showed the img element with the src.but if you look in the html of the page the imageholder div does not contain that image element at all. So why the page is not updating when the dialog opens – user516883 Dec 13 '11 at 22:11
  • @user516883 You cannot view dynamic changes to the DOM in the source. The source of the page never changes even though you are doing things like dynamically adding elements. **I highly recommend using a developer console to inspect the DOM in real-time**. FireBug is a great Firefox addon that allows you to debug the live DOM among other things. http://getfirebug.com/ – Jasper Dec 13 '11 at 22:15
  • Thanks, I got it to work, I was loading the image after the the dialog was created, I loaded the image and then the dialog and it worked ok, thanks @jasper. – user516883 Dec 13 '11 at 22:29