Menu
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>
511
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()">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
