Function for disabling lazy load for specific images

  • Resolved harrycustom

    (@harrycustom)


    3 years, 4 months ago

    I am in this situation: I have several images in above the fold for which I would like to disable lazy load, however using a conditional hook from wp is mobile. Example the logo for desktop I would like it to be Lazy load free only if the user is browsing from desktop, vice versa for the one for mobile (which in desktop is in display none, but it is still cathed by the browser) . For this reason I cannot exclude from lazy load the images from plugin interface. Therefore, I ask if there is a hook I can use that allows me to insert a list of image urls for which Lazy load should not be performed. A possible class to add to the images unfortunately is not a good solution anyway since the theme I use does not allow me to add classes to the logo and so another plugin that publishes two images above the fold.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • serpentdriver

    (@serpentdriver)

    3 years, 4 months ago

    Did you try VPI feature?

    https://blog.litespeedtech.com/2022/08/02/viewport-images-service/

    Thread Starter harrycustom

    (@harrycustom)

    3 years, 4 months ago

    Yes the function is active, but, I suppose because of the way the template is developed, it does not include the logo in the list, which is always above the fold anyway.

    I found a workaround: I created a smaller logo for desktop and a bit bigger for mobile that can work on all devices, so there is only one logo and I excluded it via url.

    serpentdriver

    (@serpentdriver)

    3 years, 4 months ago

    https://docs.litespeedtech.com/lscache/lscwp/pageopt/#media-excludes-tab

    Thread Starter harrycustom

    (@harrycustom)

    3 years, 4 months ago

    That’s exactly how I did it, but I reiterate if you have two images for desktop and mobile, hidden by device with display:none, you either exclude both from the lazy or neither.
    A hook would be handy to condition exclusion based on device with wp_is_mobile.

    serpentdriver

    (@serpentdriver)

    3 years, 4 months ago

    There is no need for a hook. If your theme supports device detection you can use Mobile View feature.

    Thread Starter harrycustom

    (@harrycustom)

    3 years, 4 months ago

    It simply add display:none for mobile block and viceversa for desktop. So, no it does not support mobile detection via server.

    serpentdriver

    (@serpentdriver)

    3 years, 4 months ago

    Okay, so please explain how a hook should fix it? You have only the resolution and the device, so you need either a detection for resolution that needs Javscript, but causes content shifting or a device detection that needs LSache cache varies by .htaccess. A hook can’t solve that, because if a page is cached there is no more PHP and therefore no hook!

    Comprende? 🙂

    Thread Starter harrycustom

    (@harrycustom)

    3 years, 4 months ago

    Ok, I understand that there is no solution. 🙂

    serpentdriver

    (@serpentdriver)

    3 years, 4 months ago

    Of course there is a solution, but the solution is custom. LScache offers everything to solve even difficult cases, but one plugin cannot cover all cases. And for the case you don’t know it, the cache plugin doesn’t cache. LScache and the web server caches. Cache plugin is just a control panel to organize the web server based cache. That’s why you don’t need the plugin for caching, only for page optimizations.

    Plugin Support qtwrk

    (@qtwrk)

    3 years, 4 months ago

    unfortunately plugin does not have such hook 🙁

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Function for disabling lazy load for specific images’ is closed to new replies.