What is the proper way to use JQuery’s .load() on an image?

Question

I am trying to use .load() to retrieve an image from the server after someone clicks a button on my page, then surround it in "a href" and "img" tags to turn the image into a clickable link, and finally append it all to a div.

Below is the code I am using and it WORKS…..

$("<a href=\"" + ObjectName[randomNumber].link + "\" target=\"_blank\">
<img src=\"/contentimages/"+ ObjectName[randomNumber].imageurl +"\"></a>").load().appendTo("#imageDiv");  

I then bind this function to a button so when the user clicks the button it executes.

Both the image (ObjectName[randomNumber].imageurl) and link (ComboArray[randomNumber].link) are properties of an object which are chosen client-side via javascript. Imageurl is a straight up .png file ("image1.png") in a folder.

My question concerns the syntax and security of how I used .load():

1) is this the proper syntax ? On the jQuery page it is reversed, with the URL request within the .load() parentheses. But the way I show above works for me.

2) according to the jQuery resource page, it says to pass into .load() just what you want to request from the server (example “/page.html”). Is it OK that I am passing in "a href" and "img" tags surrounding the Object's properties - or more specifically, that I am calling .load() on them ? I imagine these are being passed back to the server via some behind-the-scenes jquery magic, so I want to make sure it is safe to use the .load() method in this manner.

Thanks!

Answer 1

This is not the intended use of load . It "works" because what you've done would work without calling load at all, and load is likely failing silently because it's being called incorrectly (it expects a URL as a parameter)

Just the first part, $("<a ... >") will create the element out of the string provided.