So I was watching this video about responsive design and something in that video is bothering me. At 2:59 he risizes the window to the large screen and then refreshes and then Safari downloads the banner_large.jpg and when he does the same thing with the medium and small screen sizes, then Safari downloads the banner_medium.jpg and banner_small.jpg respectively. But then one can see that he is able to resize the browser and the banners change accordingly (notice the 'jumps' of the image when the threshold reaches). So the question is that if Safari doesn't download the other two images then how is it able to display them? Am I missing something here?
He has the Network Requests section selected in the Web Inspector. This would only show you when the page sends a request to the server to get a file. He had already resized the page at the beginning of the video, which would have requested the files at that time (assuming they weren't cached from a previous time). So, assuming that caching is turned on, when he resizes the page with the inspector open, it won't request the files again.
In order to show the file sizes, he refreshes the page, which forces the browser to re-download all of the files and show them in the Web Inspector. You can tell he's doing this because when he first opens the Network Requests section, it's empty (because nothing is being requested). Following this, he says, "And then hit reload" and he reloads the page which shows all of the files on the page being downloaded. You can tell that they're all being re-downloaded because in the Cached column, it says No for all files and it's displaying the contents for index.html and other files that would have been cached, such as css files and the background gradient.
Related
I have a bunch of tabs opened with index.html files in my Chrome Browser.
I want to be able to take screenshots of all these opened pages automatically.
The Chrome Browser built-in screenshot functionality doesn't work with local files.
What's the best way to bulk take screenshots? (It needs to be in Chrome Browser)
And I need screenshots of just the visible part (above the fold), not the whole page.
I am getting the strange behavior of image to be broken and coming in green color. This issue is very rare but exist. I have verified the below information but i din't get any solution or reason of problem,
Open the image in new link, which opens successfully.
Clear cache and hit the URL again, Opens site successfully.
Refresh the screen by just hitting f5, keeps the issue on screen.
While login-in css is displaying with HTML and broken images.
All css are downloading with status 200 and coming from cache.
All images are coming from azure cdn.
Network trace
Broken Image
try opening the image url location directly and see if the image is corrupted. Maybe also try to re-upload the image see if that fixes it?
I have created a site that seem's to work fine in Chrome, IE and Safari however in Firefox v 35.0.1 (on PC and Mac), pages will load fine the first time, but if a Ctrl-F5 refresh is done, the browser will only load parts of the page. I can't get it to reload the page again correctly unless I navigate away from the page and then navigate back to it.
Go here on Firefox 35.0.1 and try reloading the front-page (or any other page for that matter) with Ctrl-F5 a few times...
http://www.cygnusmusic.net
If you don't manage to create a broken page by refreshing it, I'd be keen to know about that too.
On re-loading firefox misses out images and styles in an inconsistent manner, or just displays a 'connection was reset' message over and over again until eventually it decides to part-load the page again. While Firefox is displaying a 'Connection was reset' message, other browsers still have no problem loading and re-loading the same pages.
If this is ultimately resolved as a server issue outside of answers to this question, then I will post any info I have regarding the solution as an answer here.
UPDATE
Here is a link to a video of this occurring on every page of the site, plus a broadband speedtest showing 60Mb+ download speeds...
http://youtu.be/EncGAZs9KAY
Yes, my computer is thrashing during this video, but the loading results are the same on PC's and Macs which are running properly too.
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
MagicZoom lib claims in the documentation that only the large image for the default image will be initially downloaded and the rest of the large images for each thumbnail will be downloaded after the page is loaded.
However, when I inspect the network traffic (using Firebug Net tab) I can clearly see that all large images are downloaded before the 'full page load' event is triggered.
Is this a bug in the magiczoom lib or is there a a work around this problem?
I reviewed their doc for pre-load and initialization but it doesn't give me want I want (i.e. download only the first large image so the zoom in capability is there right away, and the rest on demand or after full page load):
http://www.magictoolbox.com/magiczoom/integration/#preload
Magic Zoom loads only the first large image by default, assuming you are following the documentation here:
http://www.magictoolbox.com/magiczoom/integration/#multiple
<img src="1small.jpg">
<img src="1tiny.jpg"/>
<img src="2tiny.jpg"/>
<img src="3tiny.jpg"/>
If other large images are loading on page load, then something else on your page is causing them to download. Please post the URL of your page so that the cause can be identified.