Is there a way to tell the client-side user, through the browser, if certain images are loading from cache or if they are being loaded from the server?
You can through the browsers console. For Example inside chrome the network tab will tell you details about each resource, as for doing it in JavaScript I'm not sure you have that much control over images.
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.
in the context you access a website, the browser dowload all required files (static files : CSS, scripts) or via AJAX. OK. You can see the dowload process in realtime using the Network tab in your devtools browser.
My question is : is it possible to "listen" to a file being dowloaded using JavaScript as the browser does in the Network tab ?
A concrete example would be to show the user what the browser is being dowloaded in from my website.
While searching over the Internet, I'v seen it's possible to overload xhr native functions : Add a "hook" to all AJAX requests on a page
Nevertheless, I don't think images and CSS download will trigger xhr function because the browser processes in it's own way.
I'm keen to hear the community about it.
Thanks in advance !
If you are explicitly downloading resources in your JavaScript code, you can inject hooks to track the AJAX requests, as per your message above. You can alternatively use the Resource Timing API to track network timing information of your requests, which is nice.
However, it is not possible to see the Network information of resources out of your control, as it requires access to the browser engine.
It is possible to get such information using a Chrome Extension, as an API exists that opens you up to this information. See chrome.devtools.network.
I was checking for some load latency on a php page I am building.
I discovered some resources that I wasn't loading:
l.js
r.js
icp
s.gif
I disabled all css and js files (including jquery) in my page but still see these files loading. The s.gif is especially disturbing because the request has the URL of my php file on it and I really don't want that information out there. (I am running the server over https for security but don't want to have to put a user login on top of the server.
I am serving on OS X Server and using Safari as the debugger and load analyzer.
This issue did not show code that explaind where the resource requests were coming from. I started disabling browser extensions and that did the job. Apparently they were injecting resource requests with the downloaded pages.
There's this website which has a javascript method in it that downloads a file. To call this method you have to set what language and serial number you're looking for and when that's done, the file is being generated according to the specified information you've just stated and then the file is being downloaded. Does anyone know how to specify this information, then send it and then download the file without going to this website?
Thanks in advance, Steve-O
If you use any tool that shows you what actual networking happens, you can discover the specific web requests that downloads the file. Chrome has those tools built in. The Firebug add-on adds those tools into Firefox. There are also apps that record all networking to/from the browser such as Fiddler which can be used to sleuth on the networking being done.
Of course, there may also be some authentication going on (a log-in, some cookies, etc...) that might be required, but all of that is visible with the right developer tools. Once you see exactly what is being sent over the wire, it's usually not hard to send that same request without a browser or without visiting that web page. If login credentials are required, that will still be required, but even that can be provided without a browser (e.g. from a server-side script).
JavaScript, as of the moment, can't download files. So how files gets downloaded? Well, the developer redirects the browser to a URL using
location.href = 'http://site.com/download.zip';
When the browser is redirected to this URL, it can't open the file, so it downloads it.
You need to determine that URL the browser redirects to. There are many ways to do that. One that comes to mind is the Fiddler app that records each HTTP request and thus can give you the URL.
My guess, however, is that the URL is generated on the fly. You need to study the JavaScript in this case and see the required mechanism to make the server generates the URL.
i was wondering - when using jQuery (or any other javascript include) in my web,
does the browser cache it after the first download for all all pages (i assume yes) or will it download it every time?
2nd, when the user quits the browser and starts it again (for loading my website), will the jquery js file still be cached or will it completely download again?
thx
This depends on the browser and on how your server is set up. Have a look at the headers sent by the server along with the file (you can use a tool like Firebug to look at the headers). A good idea is to use the jQuery file hosted by google, since many other sites (including stackoverflow) use the same file. Then the browser can cache that file and never download it from your server. This page has a list of files hosted by google, and this page explains how to properly set your server up to (tell your browser to) cache files.
1: Yes, the browser caches all jscript/css includes
2: If the user does not clear his/her cache. Yes it will still be in the cache of the browser, even after closing and reopening it.
If your webserver serves jquery.js using a proper expires header, then yes, the browser will cache it.
http://developer.yahoo.com/performance/rules.html#expires
Yes the scripts will get cached between page views, along with the CSS files and images.
Yes as well, in general. The cache is normally maintained between browser restarts.
It will typically not be downloaded again, but unless your server explicitly tells the browser to cache it for a while, then it will send a request on each page load asking "was jquery.js updated?" which is almost as slow as just downloading it again.
You can test how it works on your site with Google's Page Speed or Yahoo's YSlow.