Image blinking when loading from localhost - javascript

In chrome, when I set src of image to be something on my local machine, image blinks when I reload, or get back to page. It seems that browser is not caching images or something. If I load image from some external site, it works ok.
Also works in firefox in both cases.
Does anyone knows what cause of problem?
Thank you

Problem was because maxAge header was set to 0.

Related

Google Chrome HTML5 video caching

I developing a website. Now a added a HTML5 video. This works fine.
The problem is if I change the video file in the background. So the user can upload a new video file. Chrome still gets the old video URL but playes the old video from cache.
It even playes the cached video after restarting chrome.
When I disable the cache everything is fine.
Hope someone can help me.
Thx
Pressing F12 and then right click on reload symbol/icon you can select
'Empty Cache and Hard Reload'
I found my problem. The video server implementation sent a expires header which was set in the future. So chrome thought it is not required to reload resource.

#fontface not loading properly after page refresh

I have a page that draws a string to a canvas, using a font loaded through #font-face.
To wait for the font to load, I used:
https://stackoverflow.com/a/11688948/746269
Which works fine in firefox,
and works in chrome/opera the first time the page is opened
but once I refresh the page, and try to run the same code
it ends up drawing in the default "font not loaded" font
until I run the code a second time.
Unless I open a new window or right click on refresh and choose 'Empty Cache and Hard Reload',
It will always fail the first time through.
I figured perhaps some variable was sticking around between refreshes,
but when I step through despite all values being correct, it draws the default font.
I can't just tell the client to not refresh the page and I can't see a solution at all.
Any help would be greatly appreciated :)
I solved it by adding this into the html
Found out that webkit loads fonts differently to firefox and IE, loading them at the first instance of their use in the html.
<div style="font-family: MyFontName; visibility: hidden; height: 0px; width:0px;">a</div>
I faced the same issue and I just solve it by referencing ModernizerJS script in my page.

retina.js not swapping image?

I'm having a bit of trouble using the retina.js script. I'm trying to swap the logo for a retina image on this page:
http://mikeleachcreative.co.uk/comps/fmp-mobile/
The script is included as instructed and there are definitely images included with the required '#2x' extension, you can view these images here to make sure:
http://mikeleachcreative.co.uk/comps/fmp-mobile/images/fmp_mobile_logo.png
add #2x onto the end of the filename to see the high-res version.
When this page is viewed on a retina device, I am still seeing the lower-res image, any help would be greatly appreciated.
Thanks.
It looks like (whenever the #2x image is checked) your server is returning 403 (not authorized). Check the settings on your server. Retina.js requires you to be able to make a HEAD request to the server (not GET or POST).

Firefox and IE continue to load after content has been inserted into a DIV

I have a situation where I'm inserting javascript generated HTML code into a DIV. One would think this would be a no brainer, but for some reason, once the code is in, the status bar and tab loading graphics start up in both browsers and never stop again. The page continually appears to be loading data, but in reality, there's nothing more to load. Any idea why this may be happening? Solutions? I appreciate any help. Thanks!
Install the Firebug plug-in for Firefox. Open it up and got to the NET tab. That will allow you to see your network activity. Something on the server may be stalling. This will help you find it.

Why does Google Chrome 9 not show images from Amazon S3?

If you go to this site, you'll notice a big image in the middle.
If you inspect it, you'll see this.
<img src="http://s3.amazonaws.com/mosaicimages/hmn58067pa">
If you hover over it during Inspect mode, you'll see this:
img[480x640]
And that's normal. The picture should display.
But sometimes, when I browse my site, the image simply does not display. The HTMl is the same. Everything is the same. It's just that the "cache" messes up.
This is what it looks like: http://i52.tinypic.com/1190xu0.jpg
When the image doesn't display, I clear the cache in Chrome browser settings, and the image displays again. After browsing the site again, random pictures disappear.
It's weird because when you inspect it, the code is the same. However, the image says:
img[0x0]
That's very awkward, because the image really is there. it's in S3 and it's fine.
It happens on other pages as well, not just this page. It happens for all images that are in S3.
Some of you may not be able to reproduce it. Some of my friends reproduce it. but if you can, please help, thanks.
Edit: I found a few bug issues related to Chrome? Is this it?
http://code.google.com/p/chromium/issues/detail?id=67373&can=1&q=image%20304&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS
http://code.google.com/p/chromium/issues/detail?id=68622
Edit: everything works fine in incognito mode.
Do you get the following warning in the console?
Resource interpreted as [something] but transferred with MIME type [something else]
It may happen if an image is loaded dynamically (i.e. img src changed at runtime on the client) - which was nicely responded to here.
This could also be caused by the browser actually receiving an incorrect MIME type declaration - I don't imagine that would be an S3-specific issue (given the apparently wide range of similar problems encountered) and would rather suggest it could be an issue with a forwarding (corporate?) proxy etc. - this was the case for us when including fonts but never with images.
Google chrome has an excellent report issue located in the settings tab, take this issue to them,atleast they will rectify in future release chrome versions.

Categories