Example 5 - Attaching to dynamic content

Attaching onImagesLoad events to dynamic content is no different than attaching to static content (see previous examples for specifics and syntax)
Click Here to dynamically insert a new image section. (This content could easily come from an ajax request, using something like $.ajax within jQuery core)
This example attaches 2 onImagesLoad Events when new content is added to the DOM:
- Event 1: Encapsulates only the new content section. The callback adds a yellow box within the new content when that particular content has loaded.
- Event 2: Encapsulates $(".imageSection") of the entire DOM. Prepends a yellow box to the body when all image sections have loaded.

* Note - for this example, you may have to manually clear your browser's cache to re-download cached images

Code

Show Code


<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.onImagesLoad.js"></script>
<script type="text/javascript">
    $(function(){
		var eventNumber = 1; //so we can track the ordering of the events in the example
		$('.ex5_addDynamicContent').click(function(){
			//prepare the dynamic content to be added to the DOM. this content could easily come from an $.ajax request
			var newContent = '<div><div class="sectionLabel">'
		        +'&lt;div class=&quot;imageSection&quot;&gt;'
		    +'</div>'
		    +'<div class="imageSection">';
			var randomNum = Math.floor(Math.random()*3); //returns 0 to 3
			for(i=0; i<(randomNum 1); i  ){
		        newContent += '<img src="images/' (Math.floor(Math.random()*9) 1) '.jpg" height="100" alt="image">';
		    }
		    newContent += '</div></div>';

		    var $newContent = $(newContent); //create a new jquery element out of the dynamic html

		    //attach onImagesLoad to the new content
		    $newContent
			    .onImagesLoad( function($selector){
				    //note: this == $selector. $selector will be the new content section here
				    $selector.find('.imageSection').prepend('<div class="loaded">Event #'+(eventNumber++)+': All images have loaded within this DIV</div>');
				})
				.insertAfter('#imageSections'); //insert the new content to the DOM

			//you can attach the onImageLoad events after the dynamic content has been added to the DOM too:
			$('.imageSection').onImagesLoad( function($selector){
			    //note: this == $selector. $selector is $('.imageSection') here and $selector.length == 2 (since we have 2 imageSection classes on the page)
			    $('body').prepend('<div class="loaded">Event #'+(eventNumber++)+': All images have loaded within selector $(&quot;'
					+$selector.selector+'&quot;), which now contains ' + $selector.length + ' DIV(s) (this is NOT # of images).</div>');
			});
			return false;
		});
    });
</script>

Images

Click Here to dynamically insert a new image section.

(Note- you may need to clear your cache to see this actually work)