Implement image lazy load

Off course, feel free to upload a patch.

Ideally all javascript is plain javascript ;-)

See #2365083: Applying lazyloader in Picture, it already has a patch

Are you still planning on adding aspect ratio support?

I had a quick look at the patch, some questions and small remarks. Will test the patch later today

1. +++ b/picture.module
   @@ -1251,10 +1379,19 @@ function theme_picture(array $variables) {
   -        '#theme' => 'image_srcset',
   -        '#uri' => $src,
   +        '#theme' => 'image',
   +        '#path' => $src,
   
   @@ -1264,8 +1401,8 @@ function theme_picture(array $variables) {
   -        '#theme' => 'image_srcset',
   -        '#uri' => $src,
   +        '#theme' => 'image',
   +        '#path' => $src,
   

   why the change?

2. +++ b/picture.module
   @@ -1781,7 +1925,7 @@ function picture_wysiwyg_editor_settings_alter(&$settings, $context) {
   + *drup
   

   should be removed

3. +++ b/picture.module
   @@ -1866,9 +2010,6 @@ function picture_link_types($instance) {
   -  if (!class_exists('PictureMapping')) {
   -    module_load_include('php', 'picture', 'includes/PictureMapping');
   -  }
   

   why did you remove this?

Hi, I manually applied the this patch. I can see checkboxes on /admin/structure/file-types/manage/image/file-display (lazyload, aspect ratio). However lazyloading is not working. I even tried to load lazysizes.js using context for every page. I get no error on console nor any system error.

Or do I need to apply the first patch and also second after? Thank you.

Hi,

I checked all settings and found another checkbox in image field in /admin/structure/types/manage/content-type/display. Before I checked only here /admin/structure/file-types/manage/image/file-display (lazyload, aspect ratio)

Now the <source> have data-srcset attribute and picture has class "array lazyloaded"

However now I get error: Notice: Array to string conversion in theme_picture() (line 1381 of /sites/all/modules/picture/picture.module).
And no error in console. The line 1381 from module is "$attributes['class'] = !empty($attributes['class']) ? $attributes['class'] . ' lazyload' : 'lazyload';"

So images inside fields are lazyloaded however images inserted inline (wysiwyg and ckeditor + media) are not lazyloaded. The <source> tag does not have data-srcset attribute. Images inserted inline without media do not lazyload as well. Tha only place where I could find settings for image is /admin/structure/file-types/manage/image/file-display (lazyload, aspect ratio).

Thank you.

Thank you for the patch @sergesemashko

The patch at #15 worked well when I tested it on my website. The only issue was I had a bit of trouble getting it to run (and it's probably my own fault to begin with) the first time. I suppose this is more of a documentation thing. I'll explain what happened:

When changing the "fallback" to an empty image, my CSS wasn't set to expand img tags inside pictures to be 100% width of the parent. This caused some headscratches as the heigh on images wasn't being set, and the "addAspectRatio" method failed as the img width was less than 36 pixels (1x1 blank gif). The code below is where it fails. (ls.aspectratio.js: line 158):

if(width < 36){
  if(width && window.console){
    console.log('Define width of image, so we can calculate the height');
  }
  return;
}

All I had to do was apply the CSS below to make the ls.aspectratio.js reserve correct space/placeholder for the image:

picture img { width: 100% }

@sergesemashko, I notice now that the CSS is not included when 'picture_polyfill_version' variable is set to 'dev'. The CSS is only included when the variable is set to 'min'.

Here's a rerolled patch from #15 to also include the ls.aspectratio.css when on 'dev' mode of 'picture_polyfill_version' (See comment #19)

Edit: Bad patch. Uploading a reroll again in a few min.

Trying again.

Trigger testbot

Displaying latest patch only on summary.

I can't take credit for this patch. So uploading again with correct author. Sorry for the spam (Bit new to the workflow)

Fixed in latest dev. Thanks for the patch!

Hi,

Just a little question about the lazyaspectratio... ls.aspectratio.css contains the following rule :

picture img {
  width: 100%;
}

With this rule, when aspectratio is used on at least one picture on the page, ls.aspectratio.css is loaded and apply the rule on all pictures on the page, even if it's not needed (for example pictures as thumbnail in the main content are stretched and pixelised). With this behavior, themer is obligated to add lot of rules to correct the width for any pictures that doesn't need 100% width.

Why don't use a more precise rule like this :

picture img.lazyaspectratio {
  width: 100%;
}

To apply the 100% width only to pictures that need it for the aspect-ratio calculation ? If themer want to apply 100% width to any pictures, I think it's his choice. he doesn't must be obligated to do when enabling the picture module, I'm right ??

Thanks in advance for your answer about that.

I agree with titouille #30. adding the .lazyaspectratio class helps fixing this issue.

Can somebody provide a patch?

Patch attached.

@ron_s

There is another issue created for it related to image width
https://www.drupal.org/project/picture/issues/2720209

Please follow the same and closing this issue as the patch is already merged.

I responded to the module maintainer 3 years ago in providing a patch to resolve the issue.

All of a sudden deciding that you want to point to another issue where you created the same patch 40 minutes ago is not appropriate. Resetting to Needs Review.

I think we should include the patch here. it fixes the issue

Thanks @ron_s