Load masonry after all the images are loaded
- Qasim Zee
- Dec 24, 2014
- 1 min read
The team decided to make the homepage of Biyixia.com like Pinterest or toptenreviews.com. Challenging, but thanks to the Masonry. Masonry was working absolutely fine on localhost but on the server it looks a bit messed up.
The reason was that on slow connections Masonry was being loaded before all images gets loaded in the browser so looked a bit messed up. So I loaded masonry in the following code:
var totalImages = $("#masonry-container img").length;
var totalLoaded = 0;
$("#masonry-container img").on('load', function(){
totalLoaded++;
if(totalImages === totalLoaded) {
$("#masonry-container").masonry({
//Masonry parameters ...
});
}
});
1
2
3
4
5
6
7
8
9
10
var
totalImages
=
$
(
"#masonry-container img"
)
.
length
;
var
totalLoaded
=
0
;
$
(
"#masonry-container img"
)
.
on
(
'load'
,
function
(
)
{
totalLoaded
++
;
if
(
totalImages
===
totalLoaded
)
{
$
(
"#masonry-container"
)
.
masonry
(
{
//Masonry parameters ...
}
)
;
}
}
)
;
And it worked like a charm. Here is the new biyixia.com homepage:
Please feel free to share better solutions.
コメント