<!DOCTYPE html>
<html class="" lang="en-US">
<head>
<meta charset="UTF-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<!-- <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script> -->
<style type="text/css">.image-thumb {display: inline-block;margin: 10px;}</style>
</head>
<body>
<div id="product_div">
<div class="image-thumb"><img src="image/product_01.jpg" class="thumbnail-img" width="100" height="100"></div>
<div class="image-thumb"><img src="image/product_02.jpg" class="thumbnail-img" width="100" height="100"></div>
<div class="image-thumb"><img src="image/product_03.jpg" class="thumbnail-img" width="100" height="100"></div>
<div class="image-thumb"><img src="image/product_04.jpg" class="thumbnail-img" width="100" height="100"></div>
<div class="image-thumb"><img src="image/product_05.jpg" class="thumbnail-img" width="100" height="100"></div>
<div class="image-thumb"><img src="image/image/product_06.jpg" class="thumbnail-img" width="100" height="100"></div>
<div class="image-thumb"><img src="image/image/product_07.jpg" class="thumbnail-img" width="100" height="100"></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
if (jQuery('#product_div').length) {
jQuery('#product_div').imagesLoaded().always( function( instance ) {
console.log('all images loaded');
}).done( function( instance ) {
console.log('all images successfully loaded');
}).fail( function(instance2) {
console.log('all images loaded, at least one is broken');
}).progress( function( instance, image ) {
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is => ' + result + ' for ' + image.img.src );
if(result == 'broken'){
var default_images = ["default_01.jpg","default_02.jpg","default_03.jpg","default_04.jpg","default_05.jpg"];
var new_image_name = default_images[Math.floor(Math.random()*default_images.length)];
console.log("default image is" + new_image_name); /* Random image select */
var default_img = 'default_images/' + new_image_name;
image.img.src = default_img;
}
});
}
});
</script>
</body>
</html>
