Loading images Faster in Webpage

Question

In the web application when i click on a link that should load an image from server, it is taking too much time since the images are sized approxmately 3MB - 5 MB, we are un

Answer 1

How it works We’re going to remove the images from the HTML, then put them back in using jQuery. Simple as that. This will allow the images to load after all of your other content has finished

PLUS, there’s an important added benefit: search-engines measure your page-load speed by what’s in your HTML, not what jQuery loads after the fact. That means that when Google measures your site’s loading speed, the page speed result will look significantly better. This is how to do it:

Firstly: Remove all of the big images from your HTML (my images just happened to be in an unordered list): Remove all of the big images from your HTML

Secondly: Add a jQuery snippet that will add them back into the HTML, after everything else on the page has loaded:

[js]
$(window).load(function(){ // This runs when the window has loaded
var img = $(““).attr(‘src’, ‘YourImagePath/img.jpg’).load(function() {
$(“#a1″).append(img);
// When the image has loaded, stick it in a div
});
var img2 = $(““).attr(‘src’, ‘YourImagePath/img2.jpg’).load(function() {
$(“#a2″).append(img2);
});
});[/js]

Done :D