Changing Image Source w/ Interlaced PNG [modified]
-
I would like to replace one interlaced image with another depending on the value a client selects from a dropdown. I currently have it working in that it replaces the image, but the new image isn't displayed until the entire image file has been transferred from the server. I am wondering if there is a way to display the new image as it is downloaded since it is an interlaced png file? My current javascript code is as follows:
// File: Sample.js
function ShowImage() {
var selElmt = document.getElementById('dropdown');
var selection = selElmt.options[selElmt.selectedIndex].text;
document.images['mainImg'].src = selection + '.png';
}And the associated HTML is:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<title>Image Selector</title>
<script type="text/javascript" src ="Sample.js"></script>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
</head>
<body onload="ShowImage();">
<select onchange="ShowImage();" id="dropdown" name="dropdown">
<option>Image1</option>
<option>Image2</option>
<option>Image3</option>
</select>
<img id="mainImg" src="" width="100%" title="Sample Image" alt="Sample Image" />
</body>
</html>I know that I could pre-load the images if there were only a few options (as in the example), but I have hundreds of thousands of images which makes that approach unfeasible. Most users will only view about 10 of the possible images, and there will be no pattern to their access so I can't try to predict which images will be accessed. The issue that I am attempting to solve is that when I first load the page, the image loads as it is downloaded (ie, I get a low-resolution image displayed immediately, followed by improved resolution as the interlaced pixels arrive). However, all subsequent calls to the function "ShowImage();" on the "onchange" event of the select object waits to display the image until the file has been downloaded from the server in its entirety. Is there some way to make the "onchange" event show the new interlaced image as it is downloaded? BEGIN EDIT I am
-
I would like to replace one interlaced image with another depending on the value a client selects from a dropdown. I currently have it working in that it replaces the image, but the new image isn't displayed until the entire image file has been transferred from the server. I am wondering if there is a way to display the new image as it is downloaded since it is an interlaced png file? My current javascript code is as follows:
// File: Sample.js
function ShowImage() {
var selElmt = document.getElementById('dropdown');
var selection = selElmt.options[selElmt.selectedIndex].text;
document.images['mainImg'].src = selection + '.png';
}And the associated HTML is:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<title>Image Selector</title>
<script type="text/javascript" src ="Sample.js"></script>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
</head>
<body onload="ShowImage();">
<select onchange="ShowImage();" id="dropdown" name="dropdown">
<option>Image1</option>
<option>Image2</option>
<option>Image3</option>
</select>
<img id="mainImg" src="" width="100%" title="Sample Image" alt="Sample Image" />
</body>
</html>I know that I could pre-load the images if there were only a few options (as in the example), but I have hundreds of thousands of images which makes that approach unfeasible. Most users will only view about 10 of the possible images, and there will be no pattern to their access so I can't try to predict which images will be accessed. The issue that I am attempting to solve is that when I first load the page, the image loads as it is downloaded (ie, I get a low-resolution image displayed immediately, followed by improved resolution as the interlaced pixels arrive). However, all subsequent calls to the function "ShowImage();" on the "onchange" event of the select object waits to display the image until the file has been downloaded from the server in its entirety. Is there some way to make the "onchange" event show the new interlaced image as it is downloaded? BEGIN EDIT I am
Hi I think you would be able to load images according to value selection from dropdown. you should have to define an Array which have loaded all the images during page load. Then after you can find the index of selected item from dropdown and you will get the item based on index from an Array. I hope this will help you to resolve the issue. Please do let me know, if you want something more...:rose: Thanks, Imdadhusen
sunaSaRa Imdadhusen +91 99095 44184 +91 02767 284464
-
Hi I think you would be able to load images according to value selection from dropdown. you should have to define an Array which have loaded all the images during page load. Then after you can find the index of selected item from dropdown and you will get the item based on index from an Array. I hope this will help you to resolve the issue. Please do let me know, if you want something more...:rose: Thanks, Imdadhusen
sunaSaRa Imdadhusen +91 99095 44184 +91 02767 284464
"All of the images" includes 250 GB of data, with somewhere around 1,000,000 images. Therefore, I cannot load all of them into an array (which is what I would normally do), nor can I predict which of the million images will be viewed by the client. I guess I am hoping to find a way to generate 4-16 simultaneous http requests and display the data as I receive it for all images, instead of downloading one at a time. At least then the client would get a blurry approximation of each image right away, instead of waiting until all prior images are completely finished downloading. Any additional help is appreciated,
Sounds like somebody's got a case of the Mondays -Jeff