JS new image if not in cache
up vote
0
down vote
favorite
I'm loading some images via XHR and play them as sequence on canvas element.
I preload images first and after all images are preloaded I call for every image
const im = new Image();
im.src = image;
ctx.drawImage(im ,0,0);
where image is a blob url
The problem is, when animation loops, browser make new requests for every frame. As images are cahced, it takes no time, but continuously builds thousands of requests.
I still can not pass blob url to canvas, as it does not support it, and if I try to path the actual image url, it does not work, because these urls are not preloaded, only the blob urls.
Is there a way to omit request with new Image() if src url is cached?
Thanks
P.S. To clarify
As images are preloaded for the first time, they are actually preloaded
And as i call new Image() and pass blobUrls as src, they are loaded from cache
javascript canvas blob preload
asked Nov 8 at 23:33
Sobakinet
3271525
|
show 3 more comments
up vote
0
down vote
favorite
I'm loading some images via XHR and play them as sequence on canvas element.
I preload images first and after all images are preloaded I call for every image
const im = new Image();
im.src = image;
ctx.drawImage(im ,0,0);
where image is a blob url
The problem is, when animation loops, browser make new requests for every frame. As images are cahced, it takes no time, but continuously builds thousands of requests.
I still can not pass blob url to canvas, as it does not support it, and if I try to path the actual image url, it does not work, because these urls are not preloaded, only the blob urls.
Is there a way to omit request with new Image() if src url is cached?
Thanks
P.S. To clarify
As images are preloaded for the first time, they are actually preloaded
And as i call new Image() and pass blobUrls as src, they are loaded from cache
javascript canvas blob preload
asked Nov 8 at 23:33
Sobakinet
3271525
4
Load the images and store them in an array. Then play the movie from the array.
– Chris G
Nov 8 at 23:35
1
Canvas2D might not, but WebGL certainly allows you to use blob URLs as textures and even (and that's probably far more practical?) lets you assign a stream to a texture, so you aren't working with 1000+ images but a (much smaller) mp4 or something.
– Mike 'Pomax' Kamermans
Nov 8 at 23:37
@Mike you mean webgl has a synchronous fetch algorithm in its texture API? Could you point to some resources about it. Sobakinet, even loading an Image from a blobURI is async anyway. So indeed as correctly said ChrisG, preload your images with img elements and store these elements rather than Blobs (you'll save twice memory usage btw).
– Kaiido
Nov 8 at 23:45
1
Highly related stackoverflow.com/questions/42453031/…
– Kaiido
Nov 8 at 23:47
There are both - blob urls and image urls stored in array. But if I use image urls instead of blob urls, browser loads them again, because only blobs url are preloaded.....
– Sobakinet
Nov 8 at 23:47
|
show 3 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm loading some images via XHR and play them as sequence on canvas element.
I preload images first and after all images are preloaded I call for every image
const im = new Image();
im.src = image;
ctx.drawImage(im ,0,0);
where image is a blob url
The problem is, when animation loops, browser make new requests for every frame. As images are cahced, it takes no time, but continuously builds thousands of requests.
I still can not pass blob url to canvas, as it does not support it, and if I try to path the actual image url, it does not work, because these urls are not preloaded, only the blob urls.
Is there a way to omit request with new Image() if src url is cached?
Thanks
P.S. To clarify
As images are preloaded for the first time, they are actually preloaded
And as i call new Image() and pass blobUrls as src, they are loaded from cache
javascript canvas blob preload
asked Nov 8 at 23:33
Sobakinet
3271525
I'm loading some images via XHR and play them as sequence on canvas element.
I preload images first and after all images are preloaded I call for every image
const im = new Image();
im.src = image;
ctx.drawImage(im ,0,0);
where image is a blob url
The problem is, when animation loops, browser make new requests for every frame. As images are cahced, it takes no time, but continuously builds thousands of requests.
I still can not pass blob url to canvas, as it does not support it, and if I try to path the actual image url, it does not work, because these urls are not preloaded, only the blob urls.
Is there a way to omit request with new Image() if src url is cached?
Thanks
P.S. To clarify
As images are preloaded for the first time, they are actually preloaded
And as i call new Image() and pass blobUrls as src, they are loaded from cache
javascript canvas blob preload
javascript canvas blob preload
asked Nov 8 at 23:33
Sobakinet
3271525
asked Nov 8 at 23:33
Sobakinet
3271525
edited Nov 8 at 23:59
asked Nov 8 at 23:33
Sobakinet
3271525
asked Nov 8 at 23:33
Sobakinet
3271525
asked Nov 8 at 23:33
Sobakinet
3271525
3271525
4
Load the images and store them in an array. Then play the movie from the array.
– Chris G
Nov 8 at 23:35
1
Canvas2D might not, but WebGL certainly allows you to use blob URLs as textures and even (and that's probably far more practical?) lets you assign a stream to a texture, so you aren't working with 1000+ images but a (much smaller) mp4 or something.
– Mike 'Pomax' Kamermans
Nov 8 at 23:37
@Mike you mean webgl has a synchronous fetch algorithm in its texture API? Could you point to some resources about it. Sobakinet, even loading an Image from a blobURI is async anyway. So indeed as correctly said ChrisG, preload your images with img elements and store these elements rather than Blobs (you'll save twice memory usage btw).
– Kaiido
Nov 8 at 23:45
1
Highly related stackoverflow.com/questions/42453031/…
– Kaiido
Nov 8 at 23:47
There are both - blob urls and image urls stored in array. But if I use image urls instead of blob urls, browser loads them again, because only blobs url are preloaded.....
– Sobakinet
Nov 8 at 23:47
|
show 3 more comments
4
Load the images and store them in an array. Then play the movie from the array.
– Chris G
Nov 8 at 23:35
1
Canvas2D might not, but WebGL certainly allows you to use blob URLs as textures and even (and that's probably far more practical?) lets you assign a stream to a texture, so you aren't working with 1000+ images but a (much smaller) mp4 or something.
– Mike 'Pomax' Kamermans
Nov 8 at 23:37
@Mike you mean webgl has a synchronous fetch algorithm in its texture API? Could you point to some resources about it. Sobakinet, even loading an Image from a blobURI is async anyway. So indeed as correctly said ChrisG, preload your images with img elements and store these elements rather than Blobs (you'll save twice memory usage btw).
– Kaiido
Nov 8 at 23:45
1
Highly related stackoverflow.com/questions/42453031/…
– Kaiido
Nov 8 at 23:47
There are both - blob urls and image urls stored in array. But if I use image urls instead of blob urls, browser loads them again, because only blobs url are preloaded.....
– Sobakinet
Nov 8 at 23:47
4
4
Load the images and store them in an array. Then play the movie from the array.
– Chris G
Nov 8 at 23:35
Load the images and store them in an array. Then play the movie from the array.
– Chris G
Nov 8 at 23:35
1
1
Canvas2D might not, but WebGL certainly allows you to use blob URLs as textures and even (and that's probably far more practical?) lets you assign a stream to a texture, so you aren't working with 1000+ images but a (much smaller) mp4 or something.
– Mike 'Pomax' Kamermans
Nov 8 at 23:37
Canvas2D might not, but WebGL certainly allows you to use blob URLs as textures and even (and that's probably far more practical?) lets you assign a stream to a texture, so you aren't working with 1000+ images but a (much smaller) mp4 or something.
– Mike 'Pomax' Kamermans
Nov 8 at 23:37
@Mike you mean webgl has a synchronous fetch algorithm in its texture API? Could you point to some resources about it. Sobakinet, even loading an Image from a blobURI is async anyway. So indeed as correctly said ChrisG, preload your images with img elements and store these elements rather than Blobs (you'll save twice memory usage btw).
– Kaiido
Nov 8 at 23:45
@Mike you mean webgl has a synchronous fetch algorithm in its texture API? Could you point to some resources about it. Sobakinet, even loading an Image from a blobURI is async anyway. So indeed as correctly said ChrisG, preload your images with img elements and store these elements rather than Blobs (you'll save twice memory usage btw).
– Kaiido
Nov 8 at 23:45
1
1
Highly related stackoverflow.com/questions/42453031/…
– Kaiido
Nov 8 at 23:47
Highly related stackoverflow.com/questions/42453031/…
– Kaiido
Nov 8 at 23:47
There are both - blob urls and image urls stored in array. But if I use image urls instead of blob urls, browser loads them again, because only blobs url are preloaded.....
– Sobakinet
Nov 8 at 23:47
There are both - blob urls and image urls stored in array. But if I use image urls instead of blob urls, browser loads them again, because only blobs url are preloaded.....
– Sobakinet
Nov 8 at 23:47
|
show 3 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53217740%2fjs-new-image-if-not-in-cache%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
4
Load the images and store them in an array. Then play the movie from the array.
– Chris G
Nov 8 at 23:35
1
Canvas2D might not, but WebGL certainly allows you to use blob URLs as textures and even (and that's probably far more practical?) lets you assign a stream to a texture, so you aren't working with 1000+ images but a (much smaller) mp4 or something.
– Mike 'Pomax' Kamermans
Nov 8 at 23:37
@Mike you mean webgl has a synchronous fetch algorithm in its texture API? Could you point to some resources about it. Sobakinet, even loading an Image from a blobURI is async anyway. So indeed as correctly said ChrisG, preload your images with img elements and store these elements rather than Blobs (you'll save twice memory usage btw).
– Kaiido
Nov 8 at 23:45
1
Highly related stackoverflow.com/questions/42453031/…
– Kaiido
Nov 8 at 23:47
There are both - blob urls and image urls stored in array. But if I use image urls instead of blob urls, browser loads them again, because only blobs url are preloaded.....
– Sobakinet
Nov 8 at 23:47