jquery load image after DOM is loaded

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Okay, need help. Is it possible to load all images within a folder with jquery? I really don't want to use server-side languages on this. How would I get an image to load into the browser after the html has been downloaded?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Look into the $.ajax() function of jQuery if you need a callback to your servedr, or you could just build up the image in JavaScript and use append() or one of the various alternatives to it.

I think you would find the API browser helpful.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

right, I've already got all that. The problem is that when I load the link to the image from an xml datasheet; my <img> tag is being genereated but the image is not being downloaded. I can use firefox's "Web developer" add-on to look at the generated code after the ajax command runs, and the <img> tags are there, with the src attribute pointing to the right images, but no image is rendering.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

okay, I have an idea of how to get this to work...I need to pull the tags from the xml, name them as an array, and then use a seperate ajax call to each image itself that will load the image into the document...now, is it possible to create an array within a function, and then turn it into a global array, rather then local?

I want to create the array within the first ajax call, but this will make it a local array that will be destroyed after that ajax call. If I can make it a global array, I can access the array index with the second ajax call. Can it be done?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Could you share some of the code you're using? It shouldn't be reaching this level of complication for what you're trying to accomplish. We're missing something somewhere. I've used .html("<img src="blah" />) successfully several times (and it loads the image).
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

okay, I'm not sure why...or how...but it suddenly works. Finally, good lord that took way too long.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

if you're doing the code placement within your $.ajax success option, then the delay would be from the call/response cycle. Something to keep in mind as you move forward - sometimes those calls can run a little slow, so if the user could be annoyed or think the app is 'broken' during that delay (like waiting 5 secs on an image to come back and load), then you might want to do something like a loading message right before the .ajax function and then remove it within success.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I'm going to add an asynchronous function for a loading animation, thanks for the suggestion though!

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 116 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.