图片懒加载

信息

作者：一叶知秋

安装

一、引入 baymax-shopify-lazysizes.js

将 baymax-shopify-lazysizes.min.js 添加到 assets 目录下，并在 theme.liquid 的头部引入

  <script src="{{ 'lbaymax-shopify-lazysizes.min.js' | asset_url }}" async="async"></script>

主要：如何你的主题引用了 lazysizes.js 则需确认是否有引入以下插件，则只需引入以下插件（引入以下插件前，请先确认是否已引入）

1. ls.rias.js

二、引入 baymax-shopify-lazysizes 样式

将以下样式，添加到你的样式液体文件里面

.ib_lazy_container {
  width: 100%;
  position: relative;
}
.ib_lazy {
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
.ib_lazy.lazyload {
    opacity: 0;
}
.ib_lazy.lazyloading {
  opacity: 1;
  transition: 600ms opacity;
  background: {{ settings.color_lazyloading_bg }} url({{ settings.lazyloading_img.src | img_url }}) no-repeat center;
  min-height: 60px;
}
.ib_lazy.lazyloaded {
  opacity: 1;
  transition: 10ms opacity;
}

三、引入 配置信息

将以下配置 引入到 config/settings_schema.json

{
    "name": "图片懒加载配置",
    "settings": [
      {
        "type": "header",
        "content": "说明/注意"
      },
      {
        "type": "paragraph",
        "content": "图片尺寸小于100x100 则不建议使用图片加载动画"
      },
      {
        "type": "color",
        "id": "color_lazyloading_bg",
        "label": "加载背景颜色",
        "default": "#ffffff"
      },
      {
        "type": "image_picker",
        "id": "lazyloading_img",
        "label": "加载图片",
        "info": "建议 60x60 px"
      }
    ]
}

四、导入 image-lazy.liquid 片段

将 image-lazy.liquid 存放到 snippets

使用

// shopify_image 为 shipify 图片对象 
{% render 'image-lazy' image: shopify_image, class: "me-lazy"  %}

参数
    image: 必需 shopify图片对象
    class： 图片类名 默认 无
    aspectratio: 图片纵横比 默认 图片原始比例
    crop: 图片剪辑显示位置 top、center、bottom、left、right
    pvs: 是否预览小图 默认false 
    pvs_watch: 预览小图宽度 默认 32