Iterate through images really fast with JS
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
2
down vote
favorite
1
My objective is to modify the JavaScript code to get the single image on the page to iterate through images faster. It should be possible to get the images to load in about 10 seconds(about 3 seconds on Windows). Yet I have 0 clue on how to do this.
<!doctype html>
<html>
<head>
<style>
img
max-width: 100%;
</style>
</head>
<body>
<h2>Image load optimisation test</h2>
<img id="displayImg" />
<div>Time: <span id="totalTime"></span></div>
</body>
<script>
window.onload = (function()
var timeElem = document.getElementById("totalTime"),
img = document.getElementById("displayImg"),
startX = 120576,
startY = 78640,
zoom = 17,
numTiles = 16,
updateInterval = 10,
offsetX = 0,
offsetY = 0,
startTime = new Date().getTime(),
endTime,
timeoutId;
function init()
var nextTile = getNextTile();
timeoutId = setInterval(updateTime, updateInterval);
img.onload = onImgLoad;
timeElem.innerHTML = "Loading images...";
setImage(img, nextTile.x, nextTile.y, zoom);
function updateTime()
timeElem.innerHTML = (new Date().getTime() - startTime) + " ms";
//Sets the src of the image to the given tile. Do not remove cachebust parameter
function setImage(imgElem, x, y, z)
imgElem.src = "http://nearmap-test-files.s3-website-ap-southeast-2.amazonaws.com/" + x + "_" + y + "_" + z + ".jpg" + "?cachebust=" + Math.floor(startTime);
//Gets X and Y of the next tile to be loaded. Advances "columns", then
//"rows" of a numTiles*numTiles grid
function getNextTile()
var tile =
x: startX + offsetX,
y: startY + offsetY
;
//Got to the last row of tiles
if (offsetY >= numTiles)
return null;
offsetX += 1;
//if we are the end of the row, reset x to zero and start a new row
if (offsetX >= numTiles)
offsetX = 0;
offsetY += 1;
return tile;
function onImgLoad()
var nextTile = getNextTile();
if (nextTile === null)
clearInterval(timeoutId);
else
setImage(img, nextTile.x, nextTile.y, zoom);
init();
);
</script>
</html>
Basic I know, but help would be appreciated.
Plnkr below for my working example so far.
https://plnkr.co/edit/N5h7fyFEBMj0C2fC2vgc
javascript performance image animation
edited May 21 at 13:16
200_success
123k14143399
asked May 21 at 9:12
Brendan
113
 |Â
show 1 more comment
up vote
2
down vote
favorite
1
My objective is to modify the JavaScript code to get the single image on the page to iterate through images faster. It should be possible to get the images to load in about 10 seconds(about 3 seconds on Windows). Yet I have 0 clue on how to do this.
<!doctype html>
<html>
<head>
<style>
img
max-width: 100%;
</style>
</head>
<body>
<h2>Image load optimisation test</h2>
<img id="displayImg" />
<div>Time: <span id="totalTime"></span></div>
</body>
<script>
window.onload = (function()
var timeElem = document.getElementById("totalTime"),
img = document.getElementById("displayImg"),
startX = 120576,
startY = 78640,
zoom = 17,
numTiles = 16,
updateInterval = 10,
offsetX = 0,
offsetY = 0,
startTime = new Date().getTime(),
endTime,
timeoutId;
function init()
var nextTile = getNextTile();
timeoutId = setInterval(updateTime, updateInterval);
img.onload = onImgLoad;
timeElem.innerHTML = "Loading images...";
setImage(img, nextTile.x, nextTile.y, zoom);
function updateTime()
timeElem.innerHTML = (new Date().getTime() - startTime) + " ms";
//Sets the src of the image to the given tile. Do not remove cachebust parameter
function setImage(imgElem, x, y, z)
imgElem.src = "http://nearmap-test-files.s3-website-ap-southeast-2.amazonaws.com/" + x + "_" + y + "_" + z + ".jpg" + "?cachebust=" + Math.floor(startTime);
//Gets X and Y of the next tile to be loaded. Advances "columns", then
//"rows" of a numTiles*numTiles grid
function getNextTile()
var tile =
x: startX + offsetX,
y: startY + offsetY
;
//Got to the last row of tiles
if (offsetY >= numTiles)
return null;
offsetX += 1;
//if we are the end of the row, reset x to zero and start a new row
if (offsetX >= numTiles)
offsetX = 0;
offsetY += 1;
return tile;
function onImgLoad()
var nextTile = getNextTile();
if (nextTile === null)
clearInterval(timeoutId);
else
setImage(img, nextTile.x, nextTile.y, zoom);
init();
);
</script>
</html>
Basic I know, but help would be appreciated.
Plnkr below for my working example so far.
https://plnkr.co/edit/N5h7fyFEBMj0C2fC2vgc
javascript performance image animation
edited May 21 at 13:16
200_success
123k14143399
asked May 21 at 9:12
Brendan
113
Redirected from Stack Overflow
– Mast
May 21 at 9:37
Will the amount of images vary over time? Do you realize that if you iterate over the images any faster you won't be able to take a look at the images? What's the final purpose of the code?
– Mast
May 21 at 9:39
The amount of requests is 258, which will stay the same. I'm not fussed about seeing them, I just want to try and build my skills by receiving advice and examples on how to improve. I'm thinking of maybe trying to incorporate an array as loading the images in parallel will be better then loading then sequentially , just not sure how to do it with the setImage() and it's arguments.
– Brendan
May 21 at 9:46
Ok, but what's the point of showing those images then? If they don't have to be shown, the program can be sped up considerably. But then what's it doing?
– Mast
May 21 at 10:31
1
Point of the images is just to flash quicker as I develop better ways to load them & serve them. EDIT - kind of like flipping through a deck of cards as quickly as you can, if that makes sense.
– Brendan
May 21 at 11:03
 |Â
show 1 more comment
up vote
2
down vote
favorite
1
up vote
2
down vote
favorite
1
1
My objective is to modify the JavaScript code to get the single image on the page to iterate through images faster. It should be possible to get the images to load in about 10 seconds(about 3 seconds on Windows). Yet I have 0 clue on how to do this.
<!doctype html>
<html>
<head>
<style>
img
max-width: 100%;
</style>
</head>
<body>
<h2>Image load optimisation test</h2>
<img id="displayImg" />
<div>Time: <span id="totalTime"></span></div>
</body>
<script>
window.onload = (function()
var timeElem = document.getElementById("totalTime"),
img = document.getElementById("displayImg"),
startX = 120576,
startY = 78640,
zoom = 17,
numTiles = 16,
updateInterval = 10,
offsetX = 0,
offsetY = 0,
startTime = new Date().getTime(),
endTime,
timeoutId;
function init()
var nextTile = getNextTile();
timeoutId = setInterval(updateTime, updateInterval);
img.onload = onImgLoad;
timeElem.innerHTML = "Loading images...";
setImage(img, nextTile.x, nextTile.y, zoom);
function updateTime()
timeElem.innerHTML = (new Date().getTime() - startTime) + " ms";
//Sets the src of the image to the given tile. Do not remove cachebust parameter
function setImage(imgElem, x, y, z)
imgElem.src = "http://nearmap-test-files.s3-website-ap-southeast-2.amazonaws.com/" + x + "_" + y + "_" + z + ".jpg" + "?cachebust=" + Math.floor(startTime);
//Gets X and Y of the next tile to be loaded. Advances "columns", then
//"rows" of a numTiles*numTiles grid
function getNextTile()
var tile =
x: startX + offsetX,
y: startY + offsetY
;
//Got to the last row of tiles
if (offsetY >= numTiles)
return null;
offsetX += 1;
//if we are the end of the row, reset x to zero and start a new row
if (offsetX >= numTiles)
offsetX = 0;
offsetY += 1;
return tile;
function onImgLoad()
var nextTile = getNextTile();
if (nextTile === null)
clearInterval(timeoutId);
else
setImage(img, nextTile.x, nextTile.y, zoom);
init();
);
</script>
</html>
Basic I know, but help would be appreciated.
Plnkr below for my working example so far.
https://plnkr.co/edit/N5h7fyFEBMj0C2fC2vgc
javascript performance image animation
edited May 21 at 13:16
200_success
123k14143399
asked May 21 at 9:12
Brendan
113
My objective is to modify the JavaScript code to get the single image on the page to iterate through images faster. It should be possible to get the images to load in about 10 seconds(about 3 seconds on Windows). Yet I have 0 clue on how to do this.
<!doctype html>
<html>
<head>
<style>
img
max-width: 100%;
</style>
</head>
<body>
<h2>Image load optimisation test</h2>
<img id="displayImg" />
<div>Time: <span id="totalTime"></span></div>
</body>
<script>
window.onload = (function()
var timeElem = document.getElementById("totalTime"),
img = document.getElementById("displayImg"),
startX = 120576,
startY = 78640,
zoom = 17,
numTiles = 16,
updateInterval = 10,
offsetX = 0,
offsetY = 0,
startTime = new Date().getTime(),
endTime,
timeoutId;
function init()
var nextTile = getNextTile();
timeoutId = setInterval(updateTime, updateInterval);
img.onload = onImgLoad;
timeElem.innerHTML = "Loading images...";
setImage(img, nextTile.x, nextTile.y, zoom);
function updateTime()
timeElem.innerHTML = (new Date().getTime() - startTime) + " ms";
//Sets the src of the image to the given tile. Do not remove cachebust parameter
function setImage(imgElem, x, y, z)
imgElem.src = "http://nearmap-test-files.s3-website-ap-southeast-2.amazonaws.com/" + x + "_" + y + "_" + z + ".jpg" + "?cachebust=" + Math.floor(startTime);
//Gets X and Y of the next tile to be loaded. Advances "columns", then
//"rows" of a numTiles*numTiles grid
function getNextTile()
var tile =
x: startX + offsetX,
y: startY + offsetY
;
//Got to the last row of tiles
if (offsetY >= numTiles)
return null;
offsetX += 1;
//if we are the end of the row, reset x to zero and start a new row
if (offsetX >= numTiles)
offsetX = 0;
offsetY += 1;
return tile;
function onImgLoad()
var nextTile = getNextTile();
if (nextTile === null)
clearInterval(timeoutId);
else
setImage(img, nextTile.x, nextTile.y, zoom);
init();
);
</script>
</html>
Basic I know, but help would be appreciated.
Plnkr below for my working example so far.
https://plnkr.co/edit/N5h7fyFEBMj0C2fC2vgc
javascript performance image animation
edited May 21 at 13:16
200_success
123k14143399
asked May 21 at 9:12
Brendan
113
edited May 21 at 13:16
200_success
123k14143399
edited May 21 at 13:16
200_success
123k14143399
edited May 21 at 13:16
200_success
123k14143399
123k14143399
asked May 21 at 9:12
Brendan
113
asked May 21 at 9:12
Brendan
113
asked May 21 at 9:12
Brendan
113
113
Redirected from Stack Overflow
– Mast
May 21 at 9:37
Will the amount of images vary over time? Do you realize that if you iterate over the images any faster you won't be able to take a look at the images? What's the final purpose of the code?
– Mast
May 21 at 9:39
The amount of requests is 258, which will stay the same. I'm not fussed about seeing them, I just want to try and build my skills by receiving advice and examples on how to improve. I'm thinking of maybe trying to incorporate an array as loading the images in parallel will be better then loading then sequentially , just not sure how to do it with the setImage() and it's arguments.
– Brendan
May 21 at 9:46
Ok, but what's the point of showing those images then? If they don't have to be shown, the program can be sped up considerably. But then what's it doing?
– Mast
May 21 at 10:31
1
Point of the images is just to flash quicker as I develop better ways to load them & serve them. EDIT - kind of like flipping through a deck of cards as quickly as you can, if that makes sense.
– Brendan
May 21 at 11:03
 |Â
show 1 more comment
Redirected from Stack Overflow
– Mast
May 21 at 9:37
Will the amount of images vary over time? Do you realize that if you iterate over the images any faster you won't be able to take a look at the images? What's the final purpose of the code?
– Mast
May 21 at 9:39
The amount of requests is 258, which will stay the same. I'm not fussed about seeing them, I just want to try and build my skills by receiving advice and examples on how to improve. I'm thinking of maybe trying to incorporate an array as loading the images in parallel will be better then loading then sequentially , just not sure how to do it with the setImage() and it's arguments.
– Brendan
May 21 at 9:46
Ok, but what's the point of showing those images then? If they don't have to be shown, the program can be sped up considerably. But then what's it doing?
– Mast
May 21 at 10:31
1
Point of the images is just to flash quicker as I develop better ways to load them & serve them. EDIT - kind of like flipping through a deck of cards as quickly as you can, if that makes sense.
– Brendan
May 21 at 11:03
Redirected from Stack Overflow
– Mast
May 21 at 9:37
Redirected from Stack Overflow
– Mast
May 21 at 9:37
Will the amount of images vary over time? Do you realize that if you iterate over the images any faster you won't be able to take a look at the images? What's the final purpose of the code?
– Mast
May 21 at 9:39
Will the amount of images vary over time? Do you realize that if you iterate over the images any faster you won't be able to take a look at the images? What's the final purpose of the code?
– Mast
May 21 at 9:39
The amount of requests is 258, which will stay the same. I'm not fussed about seeing them, I just want to try and build my skills by receiving advice and examples on how to improve. I'm thinking of maybe trying to incorporate an array as loading the images in parallel will be better then loading then sequentially , just not sure how to do it with the setImage() and it's arguments.
– Brendan
May 21 at 9:46
The amount of requests is 258, which will stay the same. I'm not fussed about seeing them, I just want to try and build my skills by receiving advice and examples on how to improve. I'm thinking of maybe trying to incorporate an array as loading the images in parallel will be better then loading then sequentially , just not sure how to do it with the setImage() and it's arguments.
– Brendan
May 21 at 9:46
Ok, but what's the point of showing those images then? If they don't have to be shown, the program can be sped up considerably. But then what's it doing?
– Mast
May 21 at 10:31
Ok, but what's the point of showing those images then? If they don't have to be shown, the program can be sped up considerably. But then what's it doing?
– Mast
May 21 at 10:31
1
1
Point of the images is just to flash quicker as I develop better ways to load them & serve them. EDIT - kind of like flipping through a deck of cards as quickly as you can, if that makes sense.
– Brendan
May 21 at 11:03
Point of the images is just to flash quicker as I develop better ways to load them & serve them. EDIT - kind of like flipping through a deck of cards as quickly as you can, if that makes sense.
– Brendan
May 21 at 11:03
 |Â
show 1 more comment
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Â
draft saved
draft discarded
Â
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f194856%2fiterate-through-images-really-fast-with-js%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Redirected from Stack Overflow
– Mast
May 21 at 9:37
Will the amount of images vary over time? Do you realize that if you iterate over the images any faster you won't be able to take a look at the images? What's the final purpose of the code?
– Mast
May 21 at 9:39
The amount of requests is 258, which will stay the same. I'm not fussed about seeing them, I just want to try and build my skills by receiving advice and examples on how to improve. I'm thinking of maybe trying to incorporate an array as loading the images in parallel will be better then loading then sequentially , just not sure how to do it with the setImage() and it's arguments.
– Brendan
May 21 at 9:46
Ok, but what's the point of showing those images then? If they don't have to be shown, the program can be sped up considerably. But then what's it doing?
– Mast
May 21 at 10:31
1
Point of the images is just to flash quicker as I develop better ways to load them & serve them. EDIT - kind of like flipping through a deck of cards as quickly as you can, if that makes sense.
– Brendan
May 21 at 11:03