<?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>David Czihak &#187; JavaScript</title>
	<atom:link href="http://blog.davidczihak.at/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.davidczihak.at</link>
	<description>Ein weiteres tolles WordPress-Blog</description>
	<lastBuildDate>Wed, 13 Jan 2010 12:28:04 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Wait Until All Images Have Finished Loading</title>
		<link>http://blog.davidczihak.at/294/wait-until-all-images-have-finished-loading/</link>
		<comments>http://blog.davidczihak.at/294/wait-until-all-images-have-finished-loading/#comments</comments>
		<pubDate>Wed, 13 Jan 2010 12:24:10 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Breit]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[MooTools]]></category>

		<guid isPermaLink="false">http://blog.davidczihak.at/?p=294</guid>
		<description><![CDATA[If your JavaScript function should be fired once all images in a container have finished loading, the implementation sounds easy. In fact, it is easy. I will show you how to code it using MooTools.]]></description>
			<content:encoded><![CDATA[<p>If your JavaScript function should be fired once all images in a container have finished loading, the implementation sounds easy. In fact, it is easy. I use MooTools for the explanation.</p>
<pre><code>var container = $('container');
var tempImageResponse = 0;
</code></pre>
<p>The <code>tempImageResponse</code> variable contains the number of images which finished loading.</p>
<p>Let&#8217;s hide the container and fade it in when all images have finished loading.</p>
<pre><code>container.setStyle('opacity', 0);
</code></pre>
<p>Now here comes the tricky part. The each function goes through all images inside the container.</p>
<pre><code>container.getElements('img').each(function(e){
    e.addEvent('load', function(){
        tempImageResponse++;
        if (tempImageResponse == container.getElements('img').lengts) {
            object.morph({'opacity': 1});
        }
    }.bind(this));
}.bind(this));
</code></pre>
<p>Each image recieves an <code>onload</code> function which does two things: It increments the <code>tempImageResponse</code> variable by 1. And it checks if the variable value is the same as the <code>getElements('img')</code> array length … which would mean that all images finished loading and the code can be executed.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.davidczihak.at/294/wait-until-all-images-have-finished-loading/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
