Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

Image - Lazy loading is not working in mobile screen

Avatar

Level 4

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);
});
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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!

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

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!