I have an SVG sprite sheet which uses <view> tags to identify each sprite. To show a sprite you set the img src to the spritesheet plus the sprite name as a fragment identifer, like this:
<img src="sprites.svg#coffee" width="60" height="63" />
I have a page with a preview of each sprite, so there's hundreds of these tags on the page. When I view this page in Chrome, it downloads the SVG file once. When I view it in Firefox, however, the file seems to get downloaded once for each <img> tag, so it gets 2MB of data instead of 9k gzipped. Even if I have the file in the browser cache, it seems that one of the requests hits the cache, and the remainder of them ignore it and fetch from the server.
Is there a cache header or tag I should know about to prevent this from happening? Alternately, is this a bug in Firefox? The only one I've found is 497665, but that was resolved fixed 8 years ago.
Related
My website displays thumbnail images. When the user clicks on an image, the image is displayed in a larger size. The images themselves exist in two sizes, the thumbnail size for fast rendering and then the larger size.
Initially the thumbnail size is downloaded and displayed. What I want is for the larger images to be downloaded (but be hidden) once the page has rendered/loaded. That way, the initial rendering is fast, but, when the user clicks on the thumbnail, the image is already downloaded.
At first I did this by
<div name = "big_path" style= "display:hidden" src == "" path = "big/path"></div>
In js/jquery, after loading, I then set the src attribute to path, causing the image to be downloaded. I do not use this div element for anything except to download the image.
This works in IE, but Chrome does not download hidden images. Therefore, the image is first downloaded when the user clicks on the thumbnail. Maybe this is fast enough, but I'd prefer to already have the image downloaded.
What to do?
What I ended up doing was to make the div visible, but make it 1px by 1px. And then I made it a span, not div:
<span name = "big_path" style = "width:1px; height:1px" src == "" path = "big/path"></span>
And then I still set src = path once the initial rendering is complete.
You may want to do something like this:
$(document).ready(function(){
//load images
//append images
});
Basically, you are loading the large images after the document has loaded. After that, you are appending the images like this:
$('.thumbnail').append('<img src="img/lol.jpeg" />');
You may want to put this in a for loop for lots of thumbnails.
Another solution is to use progressive jpegs.
I have a website that features lots of divs. Each div contains a different animated image. Now, as you scroll down more divs with animated images are added.
After a while, a lot of GIFs are on the page at the same time and this will make the page laggy!
My question is, what would be the best method to "tidy" the previously loaded GIFs (which are not in view-port anymore) in order to reduce the "memory load" of the page?
What I have thought about:
Change the SRC of the IMGs to Thumbnails
Turn the divs invisible
Hide the divs and somehow add a dummy margin
... ?
I have a simple handlebars template where I have some number of items and I bind image src attribute form each item to logoUrl property, something like:
{{#each App.stationsController}}
<img height="50" width="50" {{bindAttr src="logoUrl"}} {{bindAttr alt="name"}}/>
{{name}}
{{/each}}
and it I have some code changing array in stationController.
Sometimes (not always but often) I see for a glimpse gray border around image square somehting like a gray border Chrome shows for broken images.
Removing image sizes stops this effect but it's not always a good option.
I use Chrome 18.0.1025.168 on Ubuntu Natty.
With Chromium I don't see flickering.
Any hints on what could be going on and how this effect could be stopped (without removing image size)?
Update
I've created example fiddle - http://jsfiddle.net/Va8C2/3/
And screenshot showing described border may be seen at http://imgur.com/diPct it's a frame 67 from mpeg file http://www.sendspace.com/file/my0gv4
Imgur returns 403 on first 'indirect' image load opening station images in other browser tab helps to solve it
Update2
Looks like the root of the problem was found but disabling AdBlock isn't a good solution.
It seems, that Adblock extention slows Chrome rendering process.
I'm currently working on a website and having an issue with Safari. When loading an image there is a black background that is placed as a stand in. I would rather this be transparent or white, but I can't seem to figure it out. Check it out:
http://blazing-ocean-6482.herokuapp.com/
I've made html and body have background-color:white; but this doesn't seem to have changed the issue.
Just save the PNG image with interlaced option
I had the same problem in safari 6.
My image was in grayscale color space. I switched it to rgb and the problem disappeared.
Try to check your images color space settings!
This happens because the PNG has no alpha channel.
Photoshop saves the image with the alpha channel only if the image has transparent pixels.
In order to work properly in Safari, IHDR chunk of PNG image must have "truecolor-apha" in it contents.
You can see the png chunks in tweakpng (http://entropymine.com/jason/tweakpng/) or similar programs.
I've had the same issue as above (only in Safari too). My body tag has a background image, is repeat-x and is used as the background for the whole website. When a user goes to the page in Safari, there is a flash of black on page load. I've searched for ages for a solution to this, but it appears to be an unresolved bug with Safari.
I'ved tried adding "style: background-color: #FFF" to the html and body tags and also tried using the old school "bgcolor: #FFF" - none work.
The only way I could get Safari to behave was to use CSS + jQuery. Give the body a class of "bg-on" in your html and CSS files. In a linked .js file or in the of your html page in tags:
jQuery(function ($) {
$(document).ready(function(){
$('body').removeClass('bg-on');
});//end document ready
/* NOTE (window).load fires when images have been fully loaded */
$(window).load(function() {
$('body').addClass('bg-on');
});//end window load function
});//end jQuery function no conflict mode
What the above does is when the DOM is loaded by the browser, it removes the class from the body, therefore Safari won't show a black background as no background-image is there. Then when the window.load event fires, when all assets have been loaded, the body is given the background image...
It won't affect JS disabled browsers either, as the class of "bg-on" is hardcoded into the html.
Not a particularly elegant solution, but it works for me.
I had this problem recently in Safari 6.0.2, which also showed up in mobile Safari (at least in iOS 6). Saving my background as interlaced didn't work across the board & the colour space was RGB. Thankfully my background had very few colours & converting it to GIF fixed the problem entirely.
My problem was, that I have uploaded correct file, but with page builder I have edited the image - and was converted to jpg from png.
First make png with alpha and then upload - worked.
I'm building a slider. There is a set of slides, which I'm using as a content source and this content is appended to a transition wrapper everytime the slide is changing. After the transition finishes, the transition wrapper is removed from DOM. When I add completely new content (image) to the slider and I open it in Chrome for the first time, this image is not, of course, in Chrome's cache. The problem shows when I append the transition wrapper (with this new image) into DOM. Chrome sometimes (and sometimes not) sends a request to get that image and recieves a 304 response. It makes this request even 3x for the same image. But it really happens only when the slider with the new images is loaded for the first time. After refresh, the Chrome gets those "new" images from its cache and the slider works perfectly. Other browsers are OK.
BTW: I also use imagesLoaded plugin, but image preloading doesn't seem to have any effect on this problem.
I know there are better approaches to create image slider - using images as background-image etc. But my content source => transition wrapper is the way I'm using to create responsive / not-only-image / CSS3 slider.
I'm going to release this plugin soon, so I would really like to solve this problem quickly.