Home/ Questions/Q 492147
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T02:04:58+00:00

Reader’s digest version: What is the most efficient way of requesting an image from

  • 0

Reader’s digest version: What is the most efficient way of requesting an image from a server and placing it into the DOM using AJAX (or AJAI, perhaps? : ) )? Here’s the long version:

Hello SO, I’m setting up a simple page that has a list of items, and when you click on one, it does the following:

  1. Clear the modal dialog on the page (which is hidden) of the image previously in it (if any)
  2. Request the page of /url/ajax/some-image/
  3. Open the modal dialog with a spinner showing
  4. Once the request to the server finishes: inject the HTML from that page into the modal dialog

The page that’s requested above searches through a database to find the entry that matches the URL given, and returns an HTML page that says <img src="path/to/image.jpg" alt="Whatever this would be." />. I’m not sure if jQuery is saving me with some magic to make this more efficient, but it seems to me that requesting a page that requests another image is doing more work than needs to be done. What I’m looking for would be something more like this:

  1. Clear the modal dialog of the image previously in it
  2. Request the image at /url/ajax/some-image/ (I can set this to return the image itself, instead of an <img/> tag for the image)
  3. Open the modal dialog with a spinner showing
  4. Once the request to the server finishes: inject the image directly into the modal dialog

The problem I’m having is… how? I was looking at $.get, which seems to make the most sense to me for this and I’m just in a bit too far over my head–I’m quite new to JavaScript/jQuery.

I’ve set the value for the some-image part of the URL to the rel value of the <a> that it corresponds to (to clarify: this is done server-side), so I can build the URL to the image pretty easily within the click() event’s function when it’s fired, the modal dialog is just div#dialog. Could this be done with something as simple as changing the src of the <img/>?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Zack, what I think you’re missing is that the browser will do the “GET” for you.

    When you inject html into your page with JavaScript … if that code includes an <img> tag the browser will call that source url and retrieve the image for you. You don’t have to do another $.get call from your JavaScript to get the image.

    So, all you have to do is make sure that the html that is returned from your $.get includes an image tag with the correct url, the browser does the rest.

    I hope that helps.

    • 0