Щоб застосувати lazy load для зображень у вашому шаблоні Knockout, спочатку переконайтеся, що встановлено розширення Magento 2 Image Lazy Load.

Потім вставте зображення в HTML шаблон (my-template.html) таким чином:

<img data-bind="attr: {src: $parent.getPixelUrl(), 'data-original': thumbnail, alt: code_article, loading: 'lazy', width: '165', height: '165' }"/>

Приклад:

<div class="options-block" data-bind="foreach: getOptionBlocks(), afterRender: initLazyLoad()">
    <div class="option-item" data-bind="attr: {'data-sku': sku}">
        <div class="image-block">
             <img data-bind="attr: {src: $parent.getPixelUrl(), 'data-original': thumbnail, alt: code_article, loading: 'lazy', width: '165', height: '165' }"/>
        </div>
     </div>
</div>

 Ваш файл перегляду JS повинен виглядати так:

define([
'jquery',
'uiComponent',
'ko',
], function ($, Component, ko) {

'use strict';
return Component.extend({
defaults: {
template: 'Vendor_ExtensionName/my-template'
},

pixelUrl: '',

initialize: function () {
this._super();
//some code here
},

//some code here

initLazyLoad: function () {
if (window.LazyLoad) {
new LazyLoad();
}
},

getPixelUrl: function () {
return this.pixelUrl;
},

//some code here
});