Wordpress plugin

[Alfrex92]

Are you planning to release a Wordpress plugin in the near future?

Currently, none Wordpress plugin use the Intersection Observer API for lazy loading. I think that is a good business opportuniy.

I would not mind paying for a premium plugin for this library.

[Levdbas]

I might consider it doing it in the future, although I am not related to this library so far. In the meantime, you can achieve it on your own by using. You would only need to load lozad.js and use the class .lazyload as the trigger. Have fun!

/**
 * adds lazyload attribute to all image loaded inside the_content()
 *
 * @param [type] $content
 * @return void
 */
add_filter('the_content', 'baseplate_lazyload_content_images', 11);
function baseplate_lazyload_content_images($content)
{
    //-- Change src/srcset to data attributes.
    $content = preg_replace("/<img(.*?)(src=|srcset=)(.*?)>/i", '<img$1data-$2$3>', $content);
    //-- Add .lazyload class to each image that already has a class.
    $content = preg_replace('/<img(.*?)class=\"(.*?)\"(.*?)>/i', '<img$1class="$2 lazyload"$3>', $content);
    //-- Add .lazyload class to each image that doesn't have a class.
    $content = preg_replace('/<img(.*?)(?!\bclass\b)(.*?)/i', '<img$1 class="lazyload"$2', $content);
    return $content;
}

[akkis]

You can use this one: https://github.com/aderaaij/wp-image-preload Personally, I use this with an additional filter (made by me) so I can lazy-load every image I want, and not only these images that lay inside main content.

[BeholdPL]

Great!

Now I am trying use this with ACF Wyswig Field, so I use:

add_filter('acf_the_content', 'replace_img_src', 11);
function replace_img_src($replace_img_src)
{
    //-- Change src/srcset to data attributes.
    $replace_img_src = preg_replace("/<img(.*?)(src=|srcset=)(.*?)>/i", '<img$1data-$2$3>', $replace_img_src);
    //-- Add .lazyload class to each image that already has a class.
    $replace_img_src = preg_replace('/<img(.*?)class=\"(.*?)\"(.*?)>/i', '<img$1class="$2 lozad"$3>', $replace_img_src);
    //-- Add .lazyload class to each image that doesn't have a class.
    $replace_img_src = preg_replace('/<img(.*?)(?!\bclass\b)(.*?)/i', '<img$1 class="lozad"$2', $replace_img_src);
    return $replace_img_src;
}

but it's works only for images inserted directly in editor, but doesn't work for WP Gallery. Any suggestions?

[Levdbas]

As in the native WP gallery and not the ACF gallery? Check out this filter then! https://codex.wordpress.org/Plugin_API/Filter_Reference/post_gallery

[BeholdPL]

@Levdbas but isn't that post_gallery works only with galleries in the_content? In my case is custom field via ACF. I need acts for WP Gallery inserted in ACF Wyswig Editor (not ACF Gallery).

[costheme]

I might consider it doing it in the future, although I am not related to this library so far. In the meantime, you can achieve it on your own by using. You would only need to load lozad.js and use the class .lazyload as the trigger. Have fun!

/**
 * adds lazyload attribute to all image loaded inside the_content()
 *
 * @param [type] $content
 * @return void
 */
add_filter('the_content', 'baseplate_lazyload_content_images', 11);
function baseplate_lazyload_content_images($content)
{
    //-- Change src/srcset to data attributes.
    $content = preg_replace("/<img(.*?)(src=|srcset=)(.*?)>/i", '<img$1data-$2$3>', $content);
    //-- Add .lazyload class to each image that already has a class.
    $content = preg_replace('/<img(.*?)class=\"(.*?)\"(.*?)>/i', '<img$1class="$2 lazyload"$3>', $content);
    //-- Add .lazyload class to each image that doesn't have a class.
    $content = preg_replace('/<img(.*?)(?!\bclass\b)(.*?)/i', '<img$1 class="lazyload"$2', $content);
    return $content;
}

It works fine but the only issue is that that images are already loaded, so after scrolling down they will be loaded twice . My code:

/**
 * adds lazyload attribute to all image loaded inside the_content()
 *
 * @param [type] $content
 * @return void
 */
add_filter('the_content', 'baseplate_lazyload_content_images', 11);
function baseplate_lazyload_content_images($content){

   if(is_single()) {//-- if is single post page.
    //-- Change src/srcset to data attributes.
    $content = preg_replace("/<img(.*?)(src=|srcset=)(.*?)>/i", '<img$1data-$2$3>', $content);
    //-- Add .lazyload class to each image that already has a class.
    $content = preg_replace('/<img(.*?)class=\"(.*?)\"(.*?)>/i', '<img$1class="$2 lozad animated"data-toggle-class="fadeInUp"$3>', $content);
    //-- Add .lazyload class to each image that doesn't have a class.
    $content = preg_replace('/<img(.*?)(?!\bclass\b)(.*?)/i', '<img$1 class="lozad animated"data-toggle-class="fadeInUp"$2', $content);
    return $content;
   }
}

EDIT: I had an extra srcset line, but even after removing this, I have the same issue, all images are already loaded.