Loading Flash on mouse click

Flashembed demo 3 / 6 : Loading Flash on mouse click

Many times it's good practice to defer loading of the Flash object until the user clicks on the Flash container. This makes the page load faster, especially if the Flash component is large. Here we have an example:

The setup

This is our HTML/JavaScript setup. You can find a standalone version here which includes the CSS settings for the container.

<script>
// script inside the domReady method is executed after page is scriptable
flashembed.domReady(function() {

	// get flash container and assign click handler for it
	document.getElementById("flash").onclick = function() {

		// when being clicked -> load flash inside "this".
		flashembed(this, "/swf/flash10.swf");
	}
});
</script>

<!-- our flash container with some initial HTML inside it -->
<div id="flash">
	<h2>Click here to play movie</h2>
</div>

Same with jQuery

The above example uses traditional event binding using the onClick event listener. Some users don't like this because it allows you to bind only one event listener for the element. For this reason, we have a jQuery example of this same scenario:

We have set a background image for the container and the H2 title has been replaced with a play button.

// use the jQuery alternative for flashembed.domReady
$(function() {

	// bind an onClick event for this second Flash container
	$("#flash2").click(function() {

		// same as in previous example
		flashembed(this, "/swf/flash10.swf");
	});
});

You can find a standalone version of this jQuery example here.