<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>36Flavours.com &#187; image</title>
	<atom:link href="http://36flavours.com/tag/image/feed/" rel="self" type="application/rss+xml" />
	<link>http://36flavours.com</link>
	<description>A taste of something different...</description>
	<lastBuildDate>Mon, 19 Apr 2010 20:01:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>JS preload image &#039;bug&#039; in Opera</title>
		<link>http://36flavours.com/2009/03/js-preload-image-bug-in-opera/</link>
		<comments>http://36flavours.com/2009/03/js-preload-image-bug-in-opera/#comments</comments>
		<pubDate>Mon, 02 Mar 2009 14:48:39 +0000</pubDate>
		<dc:creator>Steve Whiteley</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[opera]]></category>
		<category><![CDATA[preload]]></category>

		<guid isPermaLink="false">http://sha.re.it/?p=181</guid>
		<description><![CDATA[I have recently attempted to load an image in JavaScript (using jQuery) and once loaded get it&#8217;s dimensions. Using the following code I managed to successfully read the width and height properties in FireFox 2/3, IE 6/7, Windows Safari 3/4 and Google Chrome, but the dimensions were not available in Opera (10). $&#40;'&#60;img alt=&#34;&#34; /&#62;'&#41; [...]]]></description>
			<content:encoded><![CDATA[<p class="first">I have recently attempted to load an image in JavaScript (using <a href="http://jquery.com/">jQuery</a>) and once loaded get it&#8217;s dimensions.</p>
<p>Using the following code I managed to successfully read the width and height properties in <a href="http://www.mozilla-europe.org/en/firefox/">FireFox</a> 2/3, <a href="http://www.microsoft.com/windows/products/winfamily/ie/default.mspx">IE</a> 6/7, <a href="http://www.apple.com/safari/download/">Windows Safari</a> 3/4 and <a href="http://www.google.co.uk/chrome/">Google Chrome</a>, but the dimensions were not available in <a href="http://www.opera.com/">Opera</a> (10).<span id="more-181"></span></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;img alt=&quot;&quot; /&gt;'</span><span style="color: #009900;">&#41;</span>
	.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> w <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">width</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> h <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">height</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//..</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
	.<span style="color: #660066;">error</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//..</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
	.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'src'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'/path/to/image.jpg'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>After a fair bit of time playing around trying to debug this small snippet of code, I <em>eventually</em> discovered that if the image was appended to the DOM <strong>after</strong> the width and height had been read then Opera would report the values correctly.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">		<span style="color: #003366; font-weight: bold;">var</span> w <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">width</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> h <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">height</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//..</span></pre></div></div>

<p>Simply moving line 3 down to below the reading of dimensions solved this issue.</p>
]]></content:encoded>
			<wfw:commentRss>http://36flavours.com/2009/03/js-preload-image-bug-in-opera/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
