When I upload a new image to my site it seems to not show me the updated image without first clearing my browser cache.
I'm pretty sure this isn't normal behaviour but I have no idea how to fix it, and it's causing me to pull my hair out.
I think image caching is a normal browser behavior. It makes sense: images are large, and don't change very often. If you need to refresh an image because you are developing the website, but you expect the image to be unchanging in the future, I recommend disabling caching in your browser, temporarily, while you develop the website.
To disable cache temporarily for development purposes in Chrome:
wrench/tools/developer tools/gear icon (bottom right)/check "Disable cache"
If you need the image to change constantly for the production version of the website, you can configure your server to tell browsers not to cache the page.
Related
So I recently updated my online portfolio, just a few minor changes to the design, it looked great in browsersync, then when I upload it, it looks horrible. It's like some of the CSS isn't being read. I can't figure it out. When I view it in an incognito browser, it looks just how it is supposed to - knowing that, I cleared all my cookies and data and still nothing changed. I'm new to web development, and this really boggles my mind. Does anyone know what is causing this?
Web browsers tend to locally save a version of the css so they don't have to request it from the server each time you visit the page which speeds up the load time. Try hard clearing the cache for your portfolio page then try again.
modern development tools like Chrome's web inspector can turn off caching and request the entire page from the server each time, that might help you.
Could possibly be that your browser is imposing it's default-styles onto your project, or more than likely that an addon/extension is changing your browsers' ability to display your CSS. I would suggest running through your extensions and see what could be causing it, or to quickly troubleshoot, download and install another browser and leave that clean (as in no additions) and use that to test.
I am having this problem for long time. Whenever I update my existing stylesheet it not take effect in browser instantly. If I view page source and click on my stylesheet, ex:<link rel="stylesheet" href="assets/stylesheets/theme-custom.css"> recently added codes are not shown. It updates after few hours. This happens both in Firefox & Chrome.
Why this happening? And how can I get rid of it?
Due to performance reasons browser cache loaded css files. So if you update your css you have to clear your cache. You can also reload the page with clearing it by pressing CTRL + R.
At the following linked page you can find approaches how to deliver your css and force browsers to get the current version (like adding timestamps or anything else as parameter):
https://css-tricks.com/can-we-prevent-css-caching/
EDIT:
You can also just disable the caching completely in the settings or developer tools of your browser.
I have come across a strange issue with my company's site, and it seems to only affect my computer. Changes that I have made to the raw HTML are not reflected in my browser (Firefox).
I have taken the following steps to resolving this issue, without any luck:
Ensured that the page was uploaded successfully to the correct directory (downloading the file from the server shows that it is the same file as the one just uploaded).
Cleared my browser history and cache, refreshed the page.
Opened the page in other browsers (IE, and Chrome).
RDP'd into our server and opened multiple browsers that way.
A colleague of mine sits directly across from me and he has opened the page in the same version of Firefox that I typically use and he can see the changes. He and I both work on the site regularly.
The strangest part is that I have made changes to this page before, and they showed on my screen instantly. These changes are still in place and visible, yet some HTML elements that existed before I made those changes do not show on my screen currently (despite still existing in the HTML).
Has anyone else ever experienced such a phenomenon? Is there anything else that I can try in order to resolve this issue?
Have you tried forcing cache refresh? Try it by clicking Ctrl + F5
This is pretty bizarre. I'm running my website off local host and I'm linking to an iframe hosted locally.
<iframe height="780px" width="100%" src="../../shopLocator/shopLocator.php"></iframe>
any changes to the src and the iframe wont show up so i know I'm linking to the right place.
I can edit the file all I want, even delete it and the iframe will still show up.
It's important to note that there is a live version of this iframe available as well. but checking the source through firebug, I see my local iframe and not the online one.
I have tried force refreshing, and clearing cache.
You are most likely almost definitely experiencing caching problems.
Restart the (localhost) web server
Try a different browser
Clear the cache in your current browser (usually CTRL+f5)
It's been a while since I did serious web development. Now I meet a host of brand new problems I'm no longer familiar with..
I have some .png images for various icons in my web page. What I find is that whenever I edit these images, they stop working inside a page in IE8. That is, they (usually) display OK when I first open the page, then are replaced by the placeholder icon on refresh. Sometimes, some of the icons display and others, with the same src, don't.
My image tags are nothing fancy, typically:
<img src="images/misc/smallreport.png" alt="Report" />
When I right-click an icon in the page and select "properties", protocol, type, address and size are shown as "Not Available", and dimensions are incorrect (size of the placeholder, I bet).
If I open the images directly in IE (ie. not within the page), they work just fine.
I have used Paint.NET to edit the images, but have also tried saving them with Paint.
Right now, I am working right off the hard disk (ie. not through a web server). And, oh yes, none of this happens in Google Chrome.
What's going on here?
check the path to the file is correct - can we see the tag please.
Well, we learn something new every day..
I mentioned that I'm running this directly off the harddisk? Now, it turns out the html page (which I had gotten off a coworker) was blocked "to help protect my computer", as Windows does.
This is no big surprise, lots of files I'm working with originate on other computers, and I usually don't worry much about it (except with executables, which won't run until unblocked).
It seems, however, that when IE8 loads such a blocked HTML file, its security settings adjust somehow, and - well, I can only guess at the details, but as soon as I right-clicked the HTML file, selected Properties and clicked the "unblock" button, the problem went away.
Something similar happened to me once, I tried hard to find what was wrong, then I realized I was saving (from Photoshop) the file as PSD but with extension .png. Make sure you're not doing the same.
Also:
Clear temporary Internet files
Verify that the Show Pictures option has not been turned off
Make sure that the Toggle Images.exe Web accessory is not present and disabling images
Make sure that a third-party Internet security, firewall, or cookie-blocking program is not causing the problem
Enable the Auto-Select encoding option
Source
It might be that the website you have browse has a lack of support
for an IE browser. IE is a nightmare for all web developers & Web designers.
It might be the developer of that website didn't care for an IE display because
of IE issues. Perhaps IE is trying to create a web standard to increase their
sales and marketing strategy. That's why don't care the modern Web development standard.
Why Chrome or Firefox or Safari, it's a free anyway.