Home/ Questions/Q 8490433
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T22:07:03+00:00

I want to load the image after the image is completely loaded or downloaded

  • 0

I want to load the image after the image is completely loaded or downloaded in the browser.
I dont want to display the image while it is being downloaded. Rather I would like to display a lower quality version of that image until the high quality images is loaded in the background, and when the image is completly loaded in the background, I want to replace the lower quality image with that image.

I have two images, say

$LQimage = "LQabc.jpg";

$HQimg = "HQabc.jpg";

How can I make it work?

EDIT
With the answer posted by @codebox, this code worked.. thanks 🙂

<html>
<head>
<script type="text/javascript">
function load(){
    var img = new Image();
    var imgUrl = 'HQabc.jpg';
    img.onload = function(){
        // this gets run once the image has finished downloading
        document.getElementById('pp').src = imgUrl;
    }
    img.src = imgUrl; // this causes the image to get downloaded in the background
}
</script>
</head>
<body onload="load()">
    <img id="pp" src="LQabc.jpg" width=600/>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should do it:

    function preLoadImage(){
    var img = new Image();
    var imgUrl = 'HQabc.jpg';
    img.onload = function(){
        // this gets run once the image has finished downloading
        document.getElementById('idOfImgElement').src = imgUrl;
    }
    img.src = imgUrl; // this causes the image to get downloaded in the background
}

    If you run this function once the page has loaded it should work:

    <body onload="preLoadImage()">
    • 0