I have a code working pretty well on desktop, but my images on mobiles take too long to load and sometimes isn't loading at all... any help?
code
.js
(function(a) {
var b = a(".grid").masonry({
itemSelector: ".grid-item",
columnWidth: 306,
fitWidth: !0,
transitionDuration: 0
});
b.imagesLoaded().progress(function() {
b.masonry("layout");
a(".loading").hide();
a(".grid").show();
});
a(document).ready(function() {
a("img.imgload").lazyload({
threshold: 430,
failure_limit: 10
});
});
})(jQuery);
.html
<div class="loading"></div>
<div class="grid">
<div class="grid-item"><a href="blablabla" class="main"><img class="imgload" src="/img/dummy.jpg" data-original="blablabla" width="300" height="420"></a>
</div>
</div>
.css
.loading {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 9999;background: url(/img/modal-loader.gif) center no-repeat #fff }
I have found the issue:
a(document).ready(function() {