I'm writing an application that uses Dropbox as the source of image files which are loaded via javascript by assigning img.src = "[Dropbox download link]". This works fine, but I'm often fetching many files at a time, and when re-loading a set of images (say, on a page reload), the browser re-sends a request for each one (which returns 304 not modified). I'd like to have the browser cache the image on the initial load so I can simply avoid the re-requests altogether, but can't figure out how to enable browser caching of these images. Can I set cache headers in this situation? The response headers from Dropbox have "cache-control" set to "no-cache".
You might be able to use HTML5's application cache. But I'm pretty sure you wont be able to serve the manifest file from dropbox either.
Related
I am a junior and this confuses me. I mean, if I use the same image more than once (on different routes) in React, does it mean that user downloads it more than once in browser?
I am just trying to learn that if using the same image will not cause more bandwidth in my website.
Yes, react stores images in cache memory. So it downloads the image only once and if you use the same image in other routes, it will not download it again.
For example, you can look at the following video, the image is downloaded only once, and when the route is changed, the image is not downloaded again
Test sample
Provided that you are serving the image with the correct headers, the browser should cache the image without you needing to think about it. This behaviour does not depend on the frontend framework that you're using (react, vue, angular, etc). I would read up on HTTP caching here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
For most purposes, if you have an image that never changes, the browser will only load it once and subsequent requests for it will be served from the user's harddrive. There are a million caveats (for example if the image is requested from a different origin than it was cached from), and the image is evicted from the cache (for example because the user's harddrive was full), but the only thing you need to worry about is if your image host is sending the correct headers.
In most cases with simple images requested using the <img src="example.com/pic.jpg" /> tag, this just means making sure that either the Expires or Cache-Control: max-age headers are set and have reasonable values.
For example, sending Cache-Control: max-age=86400 would keep the file in cache for up to 1 day (86,400 seconds).
I have a carousel with about 20 images. When all images are loaded, they should be cached, and then loaded once again in an iframe. Browser shows that images are cached.
The issue is the same image URL in an iframe downloading them once again, not loading from the cache.
Is there any way to load these images from cache?
The browser's cache is not window-specific.
If your images are getting re-requested, it's because one of these things is true:
(Unlikely) The URL is different (even if your server ends up returning the same image), or
(Likely) The caching headers, etc., being sent back with the images are telling the browser not to cache them, or
The browser decided not to cache them even though it is allowed to for whatever reason (e.g., its caching heuristics said "don't cache these").
To fix it, ensure that your URLs to the images evaluate to the same full URL (they probably already do, but double-check), and that the server sends back sufficient caching information to allow the browser to cache the images.
I am working with an angularjs web app. I have a sidebar with images. In my localhost these images only load once because they are cached. When I push the web app to the web the images are not cached and everytime I switch to another state the images reload. Is there a way to cache the images in angularjs without adding extra headers to the server.
You could load the images from a CDN; if the expires headers were setup properly on the CDN, using a CDN allows your images to cache and meets your questions's requirement to not setup your expires headers. This should dramatically increase the speed at which your images load anyway.
If you still aren't getting results, even after you've setup a CDN to serve static content, I would make sure the filenames being served doesn't have some kind of cache-busting url that forces a new image to download each time (the source would look something like "../path/to/image.png?23someRand0mString". And most browser's dev tools turn off caching when the dev tools are open (or at least they have a setting) so verify they aren't being cached; your images should be cached by default in most managed server configurations.
In my web app, users drag images from their desktop onto the browser window. I then use FileReader's readAsDataURL to display the image in the browser, as I described here. I can then upload the image to the server. The JavaScript in the browser can know in advance what the new URL for the image is to be.
Is there a way to tell the browser: "Here is the data that you would download from this URL, but there's no need to download it because it's already available right here. Just use this."? My aim is to get the image into the browser's cache so that using the real URL (rather than the dataURL) will display the image. This means that the browser can take responsibility for unloading such images from memory when they are (temporarily) no longer displayed.
Do you have any suggestions on how to cut out unnecessary bandwidth usage?
Correct me if I'm wrong, but I understand that you want the browser to display the image using the data from the desktop, instead of from the server on which it was uploaded.
As far as I know, browser caching relies heavily on the URLs, so I don't see how you could tell the browser to use local data instead of remote data.
However, you could:
load image directly from disk (you have the local path). However, you you have the local path in the code
use local storage (see Saving and loading an image from localStorage) to save the image locally and get it
I have a JS file hosted on Amazon S3 (http://s3.amazonaws.com/wingify/vis_opt.js). I want the file to be cached on users' browsers so that they don't have to download it with every page view. However, in spite of setting Cache Control header I don't think it is getting cached. Browser still contacts Amazon Server with every pageview.
Here is the example of page where this script is embedded: http://myjugaad.in/
If you have Firebug, you will be able to see that browser requests it with every pageview.
What can I do so that the file gets permanently cached? Thanks for help.
You need to set the Cache-Control header when upload your files.
This tells your browser how long it can cache the file for.