Ihor Vansach - 1 хв читання
Щоб застосувати відкладене завантаження для зображень у вашому шаблоні Knockout, спочатку переконайтеся, що встановлено розширення .
Потім вставте зображення в шаблон 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'ihor