Reference Link So, let's assume that we dynamically create 50 elements having a certain “background-image”, defined through CSS. So we will have the following style:
.element { background-image: url("bg.png"); }
The following code will create 50 elements that have the class “element”:
function test() {
for (var i = 0; i < 50; i++) {
var el = document.createElement("div");
el.className = "element";
el.innerHTML = " ";
document.body.appendChild(el);
}
}
There's nothing strange about it; it's the DOM way to create elements and append it to the document. Visit the test page to see it happening. With any browser other than IE6, the page will display almost instantly as the image is loaded only once. Yes, even with IE5. But with IE6, you have a chance to see how each and every of those 50 images (that are actually the same) is loaded over and over from the server.
It will work only the first time you access the page; then, it is only visible after you remove the browser “cache”. This is because our server uses special cache configuration (we will talk about it later). If you are using IE5.x and IE6 on the same machine [2], please be aware that they share the cache, so in order to see the effect with IE6 you must remove the cache if you first tried it with IE5.x.
Can't believe that when design a web page, it should make attention on this case, otherwise the bandwidth is spending out.
