The pages that exhibit this problem differ greatly in
design and technique. However, at a basic level, all pages that are known to
exhibit this specific problem add images dynamically after the initial page has
finished loading. These pages either change the
src property of an <IMG> tag or dynamically add <IMG>
tags with the
innerHTML property or
insertAdjacentHTML method.
The following example is a basic page that uses
Extensible Markup Language (XML) and
innerHTML to illustrate the code that is prone to this bug:
<HTML>
<BODY onload="doLoad()">
<SCRIPT language="JavaScript">
function doLoad()
{
xslTarget.innerHTML = source.transformNode(style.XMLDocument);
}
</SCRIPT>
<XML id="source">
<Data>
<Image>
<Name>Image 1</Name>
<Path>SomeImage.gif</Path>
</Image>
<Image>
<Name>Image 2</Name>
<Path>SomeImage.gif</Path>
</Image>
.........
.........
<Image>
<Name>Image 50</Name>
<Path>SomeImage.gif</Path>
</Image>
</Data>
</XML>
<XML id="style">
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<xsl:apply-templates select="//Image"/>
</xsl:template>
<xsl:template match="Image">
<P> Some Image
<img border="0" width="16" height="16">
<xsl:attribute name="name"><xsl:value-of select="Name"/></xsl:attribute>
<xsl:attribute name="src"><xsl:value-of select="Path"/></xsl:attribute>
</img>
</P>
</xsl:template>
</xsl:stylesheet>
</XML>
<DIV id="xslTarget"></DIV>
</BODY>
</HTML>
This sample test case is reproducible and uses Extensible Stylesheet
Language (XSL) to process the XML data in the XML tag. XSL transforms XML data
to visible content. When you set
innerHTML on the xslTarget
DIV element during the window onload event for this page, an image is
added to the page for every "Image" node in the XML data. As described earlier,
this may demonstrate the problem described in this article, depending on the
timing of other portions of the Web application.