Integration of a default lazyload library

[in-session]

The other question about the adaptation is whether it would not make sense to integrate a Lazyload libary? 99% of the lazyload libary triggers the images with the img class name lazyload and data-src. I would also suggest lazysizes here in combination with Pagebuilder. We have had the best experience with this, also because it is not dependent on jquery. It also works automatically in conjunction with any kind of JS-/CSS-/Frontend-Framework (jQuery mobile, Bootstrap, Backbone, Angular, React, Ember (see also the attrchange/re-initialization extension)), Vue is also avaiable: https://www.npmjs.com/package/vue-lazysizes

https://npmcharts.com/compare/lazysizes,jquery-lazy,lozad?interval=360 https://github.com/magento-devdocs/pagebuilder-examples/tree/master/Image/LazyLoading https://github.com/aFarkas/lazysizes

Of course, there is the loading lazy function, but it does not yet work well in all areas like sliders, ajax, ko, so you would have to integrate it better natively: https://web.dev/browser-level-image-lazy-loading/#how-do-i-handle-browsers-that-don't-yet-support-lazy-loading

<script>
    if ('loading' in HTMLImageElement.prototype) {
        const images = document.querySelectorAll('img[loading="lazy"].lazyload');
        images.forEach(img => {
            if(img.dataset.src !== ''){
                img.src = img.dataset.src;
                img.classList.add("lazyloaded");
                img.classList.remove("lazyload"); 
            }
        });
    }
    window.lazySizesConfig = window.lazySizesConfig || {};    
    window.lazySizesConfig.init = false;
    lazySizesConfig.loadHidden = false;
    lazySizesConfig.expand = 0;
    lazySizesConfig.loadMode = 1;
</script>

var config = {
    paths: {
        'lazysizes': 'lib/lazysizes/lazysizes.min',
        'lazysizesAttrchange': 'lib/lazysizes/plugins/attrchange/ls.attrchange.min',
    },
    deps: [
       'lazysizesAttrchange'
    ],
    shim: {
        'lazysizes': {
            exports: 'lazySizes'
        },
        'lazysizesAttrchange': {
            deps: ['lazysizes']
        }
    }
};

Perhaps a little more insight, lazysizes can be used not only for images but also for div containers. and that brings another advantage. Predictable isolation of a DOM subtree: https://web.dev/content-visibility/

like: <div class="block block-minicart ui-dialog-content ui-widget-content lazyload" data-role="dropdownDialog" id="ui-id-1">

<style>
    .lazyloaded, 
    .content-visibility-auto.[aria-hidden="false"], 
    .content-visibility-auto:not(.lazyloaded) {
        content-visibility: visible;
    }
    .lazyload {
        content-visibility: auto;
    }
    .content-visibility-auto.[aria-hidden="true"], 
    .content-visibility-auto.lazyload {
        content-visibility: hidden;
    }
</style>

[m2-assistant[bot]]

Hi @in-session. Thank you for your report. To speed up processing of this issue, make sure that you provided the following information:

• Summary of the issue
• Information on your environment
• Steps to reproduce
• Expected and actual results

Make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

@magento give me 2.4-develop instance - upcoming 2.4.x release

For more details, review the Magento Contributor Assistant documentation.

Add a comment to assign the issue: @magento I am working on this

To learn more about issue processing workflow, refer to the Code Contributions.

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

  :warning: According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

:clock10: You can find the schedule on the Magento Community Calendar page.

:telephone_receiver: The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

:movie_camera: You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

:pencil2: Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

[ihor-sviziev]

Hi @sidolov @xmav @kandy, Could you take a look on this feature request? What do you think about it?

[hostep]

Does this make sense now that native support to browsers for the loading="lazy" attribute value is slowly rising? Magento should get fewer js libraries now that more and more functionality is added natively to browsers, not more js libraries I believe.

But your question is not only about lazy loading images or iframes and about those other things I have no knowledge.

[in-session]

@hostep

That's true, but it will be about 2 years before it is really fully supported by browsers. It is also the case that iframe, for example, does not really run well per loading="lazy" the request for the iframe is still made too early.