All geek questions in one place

Display images after full download

I want to upload an image after fully uploading or uploading the image in a browser. I do not want to show the image while it is loading. Rather, I would like to show a better version of this image until the high quality images are loaded in the background, and when the image is fully loaded in the background, I want to replace the lower quality image with this image.

I have two images let's say

$LQimage = "LQabc.jpg"; $HQimg = "HQabc.jpg";

How can I make it work?

EDIT With the response 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>
+4
source share
1 answer

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 after the page loads, it should work:

 <body onload="preLoadImage()">
+3
source

Source: https://habr.com/ru/post/1432663/

More articles:


All Articles