Щоб застосувати 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
});