Image Loading

by bizamajig

HTML

<script src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.js"></script>
<div class="image-set">
<div class="doc_section__contentarea">





<div id="bizamajig-ui-cart-display"> <!-- start cart area -->












	<h2 class="bg">
		Artisan Breads
	</h2>

		<div href="Baguette" data-meta-cart-category-display="All Properties" data-asyncio="asyncio" data-target_content_title_01="Baguette" data-target_content_permalink_url_01="/Baguette" data-target_container_01="doc_section__contentarea" data-target_url_01="/include/bizamajig-public-store-article-body-all-asyncio.asp?primary_doc_group_id=29495&amp;doc_id=&amp;search_by_identifier_2=&amp;category_doc_group_id=29495&amp;subcategory_id=&amp;results_doc_id=210571&amp;mode_desc=Product Review" data-doc_group_built_in_ind="N" data-doc_group_url="entrance-public-section.asp" data-product_id="9864" data-results_doc_id="210571" data-subcategory_doc_group_id="" data-category_doc_group_id="29495" data-doc_group_identifier="" data-doc_id="" data-primary_doc_group_id="29495" style="width: 298px;" class="blocks bizamajig-dataset-cart"> <!-- start item thumbnail box -->

			<img width="100%" border="0" title="Baguette" src="http://bizamajig.com/content/22814/baguette_2.jpg">
			<a href="javascript:void(0)" class="cart jump-link bizamajig-ui-nav next" style="position: absolute; top: 0px; left: 0px; display: none;">Explore</a>
			<h2 class="bg">

				<a href="#">
					Baguette
				</a>
			</h2>
		</div> <!-- end category thumbnail box -->


		<div href="Ciabatta-Loaf" data-meta-cart-category-display="All Properties" data-asyncio="asyncio" data-target_content_title_01="Ciabatta Loaf" data-target_content_permalink_url_01="/Ciabatta-Loaf" data-target_container_01="doc_section__contentarea"...

CSS

img {
    display: block;
    float: left;
    margin: 5px;
    width: 20%;
}

JavaScript

$(function(){

/*
    $( '<img>', {src: 'image.jpg'}).imagesLoaded( function( $images, $proper, $broken ){
        if ( $broken.length > 0 ) {
//          Error CallBack
            console.log('Error');
        }
        else {
//          Load CallBack
            console.log('Load');
        }
    });
*/
    
/* 
    var image_set = $( '.image-set' ).imagesLoaded();
    
    image_set.progress( function( isBroken, $images, $proper, $broken ){ 
        
        this.css({
            'border': '2px solid red'            
        });
    });
*/
    
    $( '.image-set' ).imagesLoaded( function( $images, $proper, $broken ){
        if ( $broken.length > 0 ) {
//          Error CallBack
            console.log('Error');
        }
        else {
//          Load CallBack
            console.log('Loaded');
        }
    });

});