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.
Related
I have a component which lazy loads the images.For the first time when my page loads then at that time the images are displayed using lazy loading but if I refresh or reload or close and then open the tab then my images are pre loaded because it is now fetched from cache.Is there any way i can stop caching of my component in angular 7?
The cache is not being done by Angular but your browser. Once you load an image (and depending on the headers of the response) your browser will cache it to be able to load it faster the next time. This is usually a good approach.
Not sure why you don't want them to be cached but you have different options. Here you have a good read about HTTP caching: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching This cache configurations for static assets are usually done by your web server and they depend on which webserver you are using (nginx, Apache, IIS, node, ...).
Another option is to append a random query string to your image URL. This HTTP cache system works by using the image URL as a resource key to identify it. Because of this reason you can do something like:
<img src="./yourimagefolder/yourimage.jpg?r=putherearandomstring">
In this way your image resource 'Id' will be different in each request. (You will need to change the 'putherearandomstring' string in the example with a different random string each time the page is loaded.
If this is just for development purposes, you can disable the cache in developer tools. I don't see a reason you would want to do this for a live site though? As you would be forcing the user to grab the images everytime they load the component which will reduce performance.
The problem with cache in an environment where custom software is updated frequently and some users are less savvy is that they will not automatically get critical client-side changes unless they are told specifically to refresh their cache. With all of the decorations in the index.html I have not yet found a reliable solution.
I am developing a web app where I need to cache images so that it does not take time to load if user closes and opens website again.
By opening website again, images should be loaded from cache instead of reloading again.
Is this possible to implement with Angular?
I searched a lot online but I did not find proper solution for that yet.
You can use - HTML manifest Attribute
The manifest attribute specifies the location of the document's cache manifest.
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server
The manifest attribute should be included on every page of your web application that you want cached.
The manifest file is a simple text file that lists the resources the browser should cache for offline access.
Detail understanding read this blog: https://www.html5rocks.com/en/tutorials/appcache/beginner/
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.
I have a web-based app which requires a lot of resources (audio/images/video). Previously I have been hosting everything on the same server and using PreloadJS to grab all the resources and download them (while showing a nice progress bar).
I am now moving to a Content Delivery Network (CDN) to host all these assets, but need to keep the base web application on my server.
So I have my app on webapp.com and all my resources on cdn.webapp.com - my question is how do I load all these resources from another domain and view the progress at the same time? Are there libraries that handle this or am I going to need to write up some code to subscribe to the onload() function of every asset and only continue when everything is downloaded?
(Thanks to the cross-domain ajax requests I cannot use PreloadJS to download everything anymore)
In the end (and because no one came to my rescue) I achieved it by doing this:
Images/assets are on cdn.webapp.com and were included as usual in the HTML of the page. Javascript would then run and set the div these images were in to have no height. This would still allow the images to load but it would not render them on the page.
I then found a JS library (https://github.com/desandro/imagesloaded) to register callbacks on these images so it would notify me when the images were completely downloaded.
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.