The leak is pretty easy to create. Place the HTML below alongside a list of large images named "TestImage0.jpg", "TestImage1.jpg",..."TestImage9.jpg". The page will leak memory (I used sIEve for testing) on every click of the page. If the resize css is removed, the page will not leak. Can anyone confirm that this is an IE8 problem, or that my experiment is flawed?
Test Code
<html>
<head>
<title>Memory Leak Testing</title>
<script type="text/javascript">
var count = 0;
window.onload =
function() {
AppendImage();
window.document.body.onclick = ReplaceImage;
}
var ReplaceImage = function() {
window.document.body.removeChild(document.getElementById('MemTestObject' + count));
count++;
if (count > 9) {
alert('No more images to load.');
} else {
AppendImage();
}
}
var AppendImage = function() {
var imageObject = document.createElement('img');
imageObject.id = 'MemTestObject' + count;
imageObject.className = 'MemTestObject';
imageObject.src = 'TestImage' + count + '.jpg';
window.document.body.appendChild(imageObject);
}
</script>
<style type="text/css">
.MemTestObject {
width: 140px;
height: 178px;
}
</style>
</head>
<body>
<h1>Memory Leak Testing</h1>
</body>
</html>