Image Loading
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&doc_id=&search_by_identifier_2=&category_doc_group_id=29495&subcategory_id=&results_doc_id=210571&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://bizamajigxx.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: 5%;
}
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('Load');
}
});
*/
});