I'm using this lazy load plugin and it's works fine on desktop. But on mobile device, the image only load when clicked.
$("img.lazy").lazyload({effect : "fadeIn"});
How to make it work the same way as on the desktop?
I'm using this lazy load plugin and it's works fine on desktop. But on mobile device, the image only load when clicked.
$("img.lazy").lazyload({effect : "fadeIn"});
How to make it work the same way as on the desktop?
Found a solution here: https://stackoverflow.com/a/10364620/3691686
CSS
@media only screen and (max-width: 1024px) {
#mobile-detect { display: none; }
}
Javascript
var is_mobile = false;
if( $('#mobile-detect').css('display')==='none') {
is_mobile = true;
}
if (is_mobile === true) {
$('img.lazy').each(function(){
$(this).attr('src',$(this).data('original'));
});
}else{
$("img.lazy").lazyload({effect: "fadeIn"});
}