"Waterfall Product Image Loading"
Bootstrap 3.3.0 Snippet by detain

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<nav class="col-sm-2">
<menu>
<ul>
<li><i class="glyphicon glyphicon-heart-empty"> Favorites</i></li>
<li><i class="glyphicon glyphicon-heart-empty"> Favorites</i></li>
<li><i class="glyphicon glyphicon-heart-empty"> Favorites</i></li>
<li><i class="glyphicon glyphicon-heart-empty"> Favorites</i></li>
</ul>
</menu>
</nav>
<div class="col-sm-10">
<div class="row">
<div class="col-sm-12 feature">
<img src="http://lorempixel.com/610/300/fashion/4/" />
</div>
</div>
<div class="row feature-products">
<div class="product col-sm-3">
<div class="spinner"><span class="glyphicon glyphicon-repeat"></span></div>
<img class="img-responsive" src="http://www.4simplelife.net/wp-content/uploads/2013/11/5-things-to-carry-in-your-purse.jpg.jpg" />
<div class="content">
<div class="price">$145.99</div>
<p>Descriptions</p>
</div>
</div>
<div class="product col-sm-3">
<div class="spinner"><span class="glyphicon glyphicon-repeat"></span></div>
<img class="img-responsive" src="http://www.4simplelife.net/wp-content/uploads/2013/11/5-things-to-carry-in-your-purse.jpg.jpg" />
<div class="content">
<div class="price">$145.99</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Styles go here */
.table {
display:table;
}
.table-cell {
display:table-cell;
}
.table-row {
display:table-row;
}
.hide {
display:none;
}
li {
padding:0;
list-style:none;
margin:0;
}
ul{
padding:0;
margin:0;
}
/* ANIMATIONS */
.fade-in {
opacity:1 !important;
-webkit-transition: opacity 3s;
transition: opacity 3s;
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Code goes here
$(function(){
setTimeout(function(){
$('.product img').each(function(index, value){
var self = $(this);
var spinner = self.prev();
var time = (500 * index) + 1000;
setTimeout(function(){
spinner.addClass('hide');
self.addClass('fade-in');
}, time)
});
}, 3000);
$('nav').height($('.container').height())
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard React
loading circle
Lazy Loading Images with placeholders
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: