CODEWITHSUNDEEP
javascriptjqueryhtmlcss
harsh
harsh

Reputation: 131

how to display the image at last after loading all the other contents in a webpage

how to display the image at last after loading all the other contents in a webpage. I've an image on a page which is retrieved from the database when a button is pressed. I'd like to load entire page first and the image at last after the contents are loaded. any help?

Upvotes: 0

Views: 2260

Answers (5)

jeroen
jeroen

Reputation: 91734

You can load and add it to your html it in javascript using this function:

$(window).load(function() {
  // in 2 steps for clarity, can be optimized
  img_html = '<img src="/path/to/image" alt="bla bla" />';  // step 1, generate image html
  $("#image_div").append(image_html);                       // step 2, append image to some div

  // optional, see my comment below
  $("#image_div img").load(function() {
    // triggers when newly added image is completely loaded
  });
});

That makes sure loading of the image starts when everything else has finished loading.

Note that the image in the example shows while loading, if you want to load it first and then display it, you'll have to hide it and use the .load event of the image to display it.

Upvotes: 1

Shanison
Shanison

Reputation: 2295

can you use javascript to dynamically set the image url after the dom loaded?

If you have html structure

<image id="image_id"/>

Then use the following jquery code:

$(document).ready(function() {
  $("#image_id").attr("src", "link_to_image");
});

Or else, you can use some css trick, hide the image first, so it won't download from server.

Then use the following jquery code to show the image once DOM is ready:

$(document).ready(function() {
  $("#image_id").show();
});

At the same time, looks at image preload. this may be useful to you http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

Upvotes: 0

Cos Callis
Cos Callis

Reputation: 5084

In your initial load of the page you can just write a placeholder (div, span, even an image with nothing assigned to it.)

Then attaching to the button click event you can use JQuery + Ajax to callback (not postback, or is there any reason for the postback OTHER than to get the image?) to your server (or a webservice) to get the image path and assign that to the place holder. You can augment that with various jquery animations to "fade in" your image or slide down... what ever you like.

Upvotes: 0

stevecomrie
stevecomrie

Reputation: 2483

$(document).ready(function() {
  $('#imageid').attr( "src", "/new/path/to/image.jpg" );
});

Upvotes: 0

user571545
user571545

Reputation:

If by load you mean download the various parts of the page and construct the DOM, then:

$(document).ready(function() {
    $('#theimage').show();
});

Upvotes: 1

Related Questions