We Keep Coding

In Chrome, SVG elements constructed too far off-screen do not render when brought into view

I am creating a web-site that drives content for a large 2D area off a CMS, so I have a system that runs on a timer, examines the part of the area that is currently on-screen, and loads content that is close enough to the view area that it might soon come into view.
This all seems to work quite nicely, apart from one small glitch.
Some of my content is SVG elements created procedurally via JS (the load mechanism feeds data from the CMS into JS functions, which create the using document.createElementNS and insert it into a div in the correct absolute position).
This content appears fine if is on-screen at the time it is loaded (this happens when the page is initially loaded).
And it also appears if it loaded while an animation is moving the visible area (animation is used to follow paths across the 2D space).
HOWEVER, if I am manually moving the visible area (which I have implemented via click+drag) then the SVG elements are added to the document tree, but when they come into view they do not render.
If I do something to "nudge" the renderer, such as hiding an unrelated element via DevTools, or resizing the window slightly, then they appear.
I am thinking this may be a bug in Chrome? e.g. where it has initially decided the elements need not be drawn and does not reprocess correctly when that needs reconsideration? Or maybe I am missing something, I am only semi-experienced in manipulating HTML documents via JS (but after a quick look I do not see the same behaviour in firefox...)
I am moving the visible area by changing the (left, top) of a parent element (I do not want to use scrolling for that as the size of the 2D space is not defined in advance...)
Otherwise, is there some way I could trick the browser into recalculating what should be drawn? I was wondering about having a small transparent element on screen that I show and hide on a timer, although a workaround that prevents the problem in the first place would be preferable...
Thanks for any advice!
Ian
p.s. I cannot instantly produce demo code for this as the code-base is moderately large, but I will spend time to make a simpler example if that proves necessary...

Chrome reloading embedded SVG object when hiding and showing parent DIV container

I am using Adobe Edge Animate to do some CSS3 animations, and using a plugin that converts the SVG images to tags so that the SVG elements are accessible via Javascript. The problem is, when one of the parent DIV containers is hidden and later re-shown, the embedded SVG image is reloaded losing any changes that have been made to it, such as fill colors of shapes, etc.
This also causes some stuttering in the animation when a new image is loaded, as it takes a small amount of time to reload the image.
This problem is not present in Firefox or IE. Is there any way to tell chrome to not re-load embedded images when hidden and shown?
Here is a link to the page in question: Link
If you press the enter key, it triggers part of the animation. You can see after the rotation where it switches out the image and flashes. If you use the built in function via browser console called changeBladeColor() you can see how it resets any changed attributes. This function changes the fill colors of the shapes in the SVG.
Here is an example usage for testing:
changeBladeColor(1, '#ff0000');

It seems the only solution is to position the elements off the page. I had to re-do a lot of my animation, so keep this in mind when doing any projects where you need to display and hide objects (especially ones that may not appear to be doing so).

What's the best way to preload all types of images?

I want to preload all images on my page.
My page has some images used directly as links, i.e. as img tags within an a tag, as well as some images which are in the background-image property of some spans.
What's the best way to preload them all? I notice that a lot of the preload scripts seem to assume that the images will be loaded within image tags. For example, I've implemented this script: http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml
But it doesn't make a difference on my page where certain spans when hovered over should have a new background. There's still a pause on my page when the user hovers over an element, before the right images background shows up.
Edit
I know about using sprites, my question is asking for a solution apart from sprites.

The following jQuery plugin was featured on http://www.unheap.com a while ago. Could this be of service?
http://nick-jonas.github.io/imageloader/
I do notice that the Github repository is "unavailable due to DMCA takedown", but maybe it could point you in the right direction.
Another solution might be this plugin:
https://github.com/sebarmeli/JAIL

Stop GIFs from Preloading

I am playing with a new website I created a few days ago.
The site contains lots and lots of gifs there is displayed on the frontpage. As of right now, a static .png thumbnail is showed and when hovered, it displays the gif instead.
This is pretty much what I want. However, as of now, the site preloads every single gif on the page, which takes a long time and a lot traffic is wasted. If there are 50 gifs on the frontpage and every gif is 2mb, that's 100mb traffic per user.
Isn't it possible to only load every png, then load the gif if it's hovered? I know it won't play smooth the first time, but I don't have a whole lot of web traffic on my web hotel.
Is this possible with either some PHP or good-old JavaScript?
Thanks

Change the URL of the image with hover. In this case with jQuery
$('#my_image').hover(function(){
$('#my_image').attr('src','my.gif');
});
Want to make it dynamic without having to set it per image? Add the HTML5 Data element:
<img src="my.png" data-gif="my.gif" />
And with JavaScript:
$('img').hover(function(){
$(this).attr('src',$(this).data('gif'));
});

You can add the HTML that contains the GIFs to the DOM after page load, inserting it as a string or using AJAX.
Another viable solution is to use CSS sprites and eliminate all those images by combining them into a larger one.

You're thinking about it the wrong way. Browsers don't request images unless you include the images in your page. You shouldn't try to prevent included images from being loaded, you should simply not include the images in the first place.
Remove the image URL from your code. In whatever code you have that currently makes the hidden image visible, you can set the URL as well.

Are the file names the same except for the extension? If so I would recommend this approach
Stop a gif animation onload, on mouseover start the activation
What you would do different is replace the .png with .gif this will load the gif on hover instead of at page load. Right now it sounds like you are loading both the .png and the .gif in a hidden div.
Edit:
Then on mouseout you would switch the source back to the .png.

mouseover element flickers

I have an image on a webpage and when the user hovers over it, another image appears. When then hovering over the appearing image, it flickers.
Anybody any idea why that is?
Tony
UPDATE: The first image does not dissapear when hovering, just another (smaller) image appears over the top in the left top corner. When now moving over that smaller image, then the flicker appears.
The image on the site is part of a gallery, so it's a php variable and gets loaded when a user selects from a list of images. So embedding one into the other is very hard.

Because the browser is fetching the new image. The best solution is to incorporate both images into one, and either purely use CSS to change the background-position on :hover, or ( for IE6 and non-anchor elements ) change the background position with JS.

In IE? IE is notorious for not caching images that are loaded dynamically (either with CSS :hover or due to Javascript events). You can use CSS sprites (basically, using one image file to display both images, and using positioning to show one or the other; tutorial, linked by Mike Robinson), or you can use image preloading:
var preloadImg = document.createElement('img');
preloadImg.src = 'path/to/image';
Edit: and other browsers will do the same on first load. IE just may continue to do it on every switch.

If I understand you right, you probably replace the src of your image every time the mouseover event is fired. So, even when your image is replaced, your event is fired and the image is replaced with itself, which may cause flickering.

I guess you're probably using IE. This is a bug with the way it implements caching in some versions. You fix it by either configuring your web server to send proper cache headers, or by using CSS sprites. I recommend the latter, as that means less HTTP requests, and the preloading works even without JS.