Image - Lazy loading is not working in mobile screen

[santhoshsrg]

Hi,

I am trying to use Image OOTB lazy loading, it works fine in desktop and Tablet when i just scroll down the page but it is not working in mobile screen. In mobile screen, I had to do a hard touch to load the images. If i add "touchmove" event to list of events added in core image.js, then on scroll, the images are loading fine in mobile screen. To solve this issue, i have to override core image clientlibs in my project. Is there any other better solution to this issue?

I did a small change core Image component - image.js - init() function from 

["focus", "click", "load", "transitionend", "animationend", "scroll"].forEach(function(name) {

document.addEventListener(name, that.update);

}); 

to

["focus", "click", "load", "transitionend", "animationend", "scroll", "touchmove"].forEach(function(name) {

document.addEventListener(name, that.update);

});

[Asutosh_Jena_ · Accepted solution]

Hi @santhoshsrg 

The touchmove event occurs when the user moves the finger across the screen and the event will be triggered once for each movement, and will continue to be triggered until the finger is released.

Note: The touchmove event will only work on devices with a touch screen.

So the approach that you have followed is correct!

Hope this helps!

Thanks!

[santhoshsrg]

Thanks for your input!