Fire onload event after loading the first image

Question

I've a "screenshot" of a website, which we assume is already in the browser cache.

I want the image to be the first thing that's being loaded when the URL of that website is opened in a browser. Think of it as sort of a preloader.

The onload event should fire immediately after that. (= basically instantly) This is just for the cosmetic reason to stop the browser showing the loading animation to the user.

After that, the rest of the page should be loaded. Once finished, the image should be removed.

So in that order:

1. Show preloaded image
2. Make the browser think the page is fully loaded
3. load the actual website
4. hide the preloader image

Is there any way, clean or dirty to do that?

Answer 1

Something like this using the the "on load" event on the image.

<div>
<img src="yourpreloadimage.gif" id="img" />
</div>

<script>

$("#img").on('load', function() {
$("#img").hide();
  alert("image is loaded. Hide image and show rest of page.");
});
</script>