You can use this same piece of code to refresh the image as many times as you like so putting it in a function is useful. Visual browsers will also hide the broken image icon if the alt is empty and the image failed to display. This code appends the timestamp to the source URL and will ensure the image is reloaded and refreshed with your new modified image. Setting this attribute to an empty string ( alt'') indicates that this image is not a key part of the content (it's decoration or a tracking pixel), and that non-visual browsers may omit it from rendering. Var el = document.getElementById( "testimg") create a new timestamp var timestamp = new Date().getTime() const img document.querySelectorAll('img') This will get all of the image element references and create a. To reload the image in Javascript, we can simply select the element and modify its src attribute to be that of the target image, along with the bogus query string to ensure it does not use the cache.Īs an example, let's assume you have an image "test.jpg" which needs to be reloaded. To get a reference to all three image elements, we’ll need to use querySelectorAll(). For this we can just use a timestamp so that no matter when it is called, the URL will always be unique. To modify the URL without affecting the image, we can simply use a dummy query string that can be attached to the end of the URL, it just needs to be unique. Sets or returns the value of the hspace attribute of an image: isMap: Sets or returns whether an image should be part of a server-side image-map, or not: longDesc: Not. This means that if we change something within the URL and then attempt to reload the image, the cache will no longer be able to determine that it is the same resource and will rather fetch it again from the server. Sets or returns the CORS settings of an image: height: Sets or returns the value of the height attribute of an image: hspace: Not supported in HTML5. The browser cache relies on the URL to determine whether content is the same or not and whether to use the stored version. Given that the URL of the image you are trying to load remains exactly the same before and after it was modified, the browser will assume that it is the exact same image and rather than requesting it again from the server, it will fetch it from the cache and it will not refresh.įorcing an image reload by tricking the browser cache Displaying an individual image that is subject to frequent change in your HTML document while only making use of the element can be a bit of a challenge, mainly because modern browsers and servers are designed to optimize data usage as much as possible and make use of caching to ensure you don't have to load the same image multiple times.Ĭaching may be beneficial in the long run but it does make operations such as reloading an image a bit more difficult as you can't simply replace the image or reset it's source.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |