Lazysizes.min.js实现无法正常工作

我们正在尝试在https://github.com/aFarkas/lazysizes/tree/master上实现(https://berkshireblanket.com)。

但是在遵循所有指示后,该实现将无法正常工作。当我使用DevTools运行检查时,其输出为false:

typeof($("img").lazyload) === "function"

我很茫然,我不确定是否在脚本或HTML中丢失了某些内容。

下面是我们的HTML,以显示当前的实现方式:

Lazysizes.min.js实现无法正常工作

<div class="product-main-images {% if section.settings.thumbnails == 'bottom' %}desktop-12{% else %}desktop-10{% endif %} tablet-6 mobile-3" tabindex="0">
    <div class="product-image-container" style="padding-bottom: {{ product_image_box_ratio_max }};" >
    {% for image in product.images %}
    {% assign image_box_ratio = image.height | append: ".0" | times: 1 | divided_by: image.width | times: 100 | append: "%" %}
    {% assign img_url = image | img_url: '1x1' | replace: '_1x1.','_{width}x.' %}

    <div class="product-main-image {% if forloop.first %}selected{% endif %}" data-image-id="{{ image.id }}">
        <a class="product-fancybox" rel="product-images"  href="{{ image | img_url: '2400x' }}" tabindex="-1">
            <img id="{{ product.id }}" class="product__image lazyload"
            src="{{ image | product_img_url: '300x' }}"
            data-src="{{ img_url }}"
            data-sizes="auto"
            data-zoom-src="{{ image | img_url: '2400x' }}"
            alt="{{ image.alt | escape }}">
        </a>
        <noscript>
            <img id="{{ product.id }}" class="product-main-image lazyload" src="{{ featured_image | product_img_url: '800x' }}" alt='{{ image.alt | escape }}'/>
        </noscript>
    </div>
    {% endfor %}
    </div>
</div>

我将不胜感激!

请让我知道是否可以澄清任何事情,或者提供当前实施的更多示例。

谢谢!

ningyaoaa 回答:Lazysizes.min.js实现无法正常工作

您可能需要将src更改为data-src

<img id="{{ product.id }}" class="product-main-image lazyload" data-src="{{ featured_image | product_img_url: '800x' }}" alt='{{ image.alt | escape }}'/>
,

安装lazysizes,然后将类“lazyload”添加到所有图像和iframe,并在img标签中确保将“src”更改为“data-src”

本文链接:https://www.f2er.com/3158872.html

大家都在问