Home/ Questions/Q 6116253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:11:07+00:00

I want to set an image control with some url but the image should

  • 0

I want to set an image control with some url but the image should only shown to the user when it is fully loaded. Below is my code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

</head>
<body>
    <img id="1" />
    <img id="2" />
</body>

<script type="text/javascript">

    $("<img/>").attr("src", $("#1").attr("src"))
                .load(function() {
                    //How to set image 2 with with image which I just loaded
                });
</script>

</html>

Above I am loading the image of img1 in memory, now how I am going to set the same image to img2. I am loading image in memory of img1 because I want to show the img2 with img1 src at once.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First off, the HTML id element cannot start with a number, so id="1" is invalid (it may not work in every browser). I’d suggest using a common prefix (such as img). Thus 1 would become img1 and 2 would become img2.

    Second, inside of an event handler, this is set to the element that triggered the event, so:

    .load(function() {
    // If you want to use the same element to pre-load multiple images
    this.src = document.getElementById("img2").src;

    // Or, if you want to set the pre-loaded image somewhere in the DOM
   document.getElementById("img2").src = this.src;

   // Or, if you want to inject this now pre-loaded img tag into the DOM directly
   $("some_selector").append(this);
});

    would work.

    • 0