If css is defined as follows: .bg1 { background-image: url(img1.jpg); } .bg2 { background-image: url(img2.jpg); } And then you change the background on an element using: document.getElementById('pagebg').className = "bg1"; or document.getElementById('pagebg').className = "bg2"; The "old" image reference is not freed up. (Use of cache has been disabled) If I change the image background using document.getElementById('pagebg').style.backgroundImage = 'url(img1.jpg)'; or document.getElementById('pagebg').style.backgroundImage = 'url(img2.jpg)'; The old image reference is correctly freed up. I have put up pages to illustrate this behaviour: The first use case (which caches the image) is at: http://www.joelebeau.co.uk/testcssbg/index.htm The 2nd use case is at: http://www.joelebeau.co.uk/testcssbg/index2.htm (In both pages the image loads/transitions are triggered by a key press)
I'm not sure what the difference in behavior between the two linked tests is. What do you mean by "freed up"? Is this a memory leak, and if it is, how did you confirm it?
Essentially i looked at the web server logs in both cases... In the first case I could see each image only being requested once. In the 2nd case each image was re-requested before each change. From adding debug it seems that there is still a reference (client) to the CachedImage by CSSImageValue
We used to load all images referenced by matched selectors, but that was fixed by bug 49204. Does this still reproduce?
Simon, did you mean to reference bug 24223?
(In reply to comment #4) > Simon, did you mean to reference bug 24223? I did, yes.