Ask your JavaScript questions! Pay money and get answers fast! (more info)

Touch event trigger for Lazy Load and Masonry (jQuery) JavaScript

  • SOLVED

I'm using the jQuery plugins Lazy Load (http://appelsiini.net/projects/lazyload) and Masonry (http://masonry.desandro.com) in order to load a grid of images on the fly. The scripts work great combined on a desktop, but for touch devices images aren't loaded with a proper timing due to Lazy Load by default triggering on scroll. The touch devices register the scroll event once the user completes a swipe, creating a delay for the loading images.
I've been trying to add a workaround for this but my JS skills are limited and I'm looking for a way to create a conditional to the code below that trigger Lazy Load differently depending on the users device:


if ( $grid.length > 0) {
$grid.imagesLoaded( function() {
$grid.delay(200).masonry({
gutterWidth: 14,
itemSelector: '.item',
isAnimated: false,
isFitWidth: true,
columnWidth: 194,
animationOptions: { duration: 400 }
});

$('.item img').lazyload({
effect: 'fadeIn'
});
});
}

Answers (1)

2013-06-13

Ross Wilson answers:

Do you have Modernizr included on your page (js in the header)?

If so you could do something like this instead of the lazyload code you have above

$('.item img').lazyload({
effect: 'fadeIn',
event: 'touchLoad'
});

//test if we are on a touch device
if(Modernizr.touch){

//automatically start loading lazy-loaded images 1s after page is done loading
$(window).bind("load", function() {
var timeout = setTimeout(function() {$(".item img").trigger("touchLoad")}, 1000);
});
}


Otherwise you can do it in plain javascript

$('.item img').lazyload({
effect: 'fadeIn',
event: 'touchLoad'
});

//see if we are on a touch device
if(!!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator)){
//automatically start loading lazy-loaded images 1s after page is done loading
$(window).bind("load", function() {
var timeout = setTimeout(function() {$(".item img").trigger("touchLoad")}, 1000);
});
}


saturate comments:

Thanks for the suggestion Ross. I can't seem to get this working though. I'm using Modernizr and I added your code so that the script now looks like this -

if ( $grid.length > 0 && $(window).width() > mobile) {
$grid.imagesLoaded( function() {
$grid.delay(200).masonry({
gutterWidth: 14,
itemSelector: '.item',
isAnimated: false,
isFitWidth: true,
columnWidth: 194,
animationOptions: { duration: 400 }
});

if ( Modernizr.touch ) {
$('.item img').lazyload({
effect: 'fadeIn',
event: 'touchLoad'
});

$(window).bind('load', function() {
var timeout = setTimeout(function() {$('.item img').trigger('touchLoad')}, 500);
});
}
else {
$('.item img').lazyload({
effect: 'fadeIn'
});
}
});
}


The images still only load once the swipe is complete, and not when the user starts swiping.


saturate comments:

Sorry, my bad. The script does work. I forgot to add the top conditional for running the timeout function. I would like to see it loading on swipe though instead of creating a timer, but perhaps its just not possible to replicate this on a touch device.