{"id":27168043,"url":"https://github.com/alexayan/mina-lazy-image","last_synced_at":"2025-08-02T04:07:05.720Z","repository":{"id":57297328,"uuid":"157507263","full_name":"alexayan/mina-lazy-image","owner":"alexayan","description":"小程序图片懒加载组件","archived":false,"fork":false,"pushed_at":"2019-11-28T00:31:11.000Z","size":900,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T08:14:55.457Z","etag":null,"topics":["miniprogram"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexayan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-14T07:17:02.000Z","updated_at":"2024-07-03T05:16:54.000Z","dependencies_parsed_at":"2022-09-01T08:40:53.322Z","dependency_job_id":null,"html_url":"https://github.com/alexayan/mina-lazy-image","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexayan%2Fmina-lazy-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexayan%2Fmina-lazy-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexayan%2Fmina-lazy-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexayan%2Fmina-lazy-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexayan","download_url":"https://codeload.github.com/alexayan/mina-lazy-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247981496,"owners_count":21027931,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["miniprogram"],"created_at":"2025-04-09T05:20:17.340Z","updated_at":"2025-04-09T05:20:18.481Z","avatar_url":"https://github.com/alexayan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mina-lazy-image\n\n小程序图片懒加载自定义组件\n\n## 背景\n\n​小程序原生图片组件 image 提供的图片懒加载功能 `lazy-load` 限制过多，只针对 page 与 scroll-view 下的 image 有效。\n\n## 实现思路\n\n使用 `wx.createIntersectionObserver()` 判断图片是否出现在视口中并进行加载\n\n## 使用方法\n\n1. 安装组件\n\n```\nnpm install --save mina-lazy-image\n```\n\n2. 在页面的 json 配置文件中添加 mina-lazy-image\n\n使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅[官方 npm 文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。\n\n   ```json\n   {\n     \"usingComponents\": {\n       \"mina-lazy-image\": \"mina-lazy-image/index\"\n     }\n   }\n   ```\n\n3. WXML 文件中引用 mina-lazy-image\n\n   ```xml\n   \u003cmina-lazy-image src=\"{{src}}\" mode=\"widthFIx\" image-class=\"custom-class-name\"/\u003e\n   ```\n\n   **mina-lazy-image 的属性介绍如下：**\n\n   | 字段名                | 类型    | 必填 | 描述                                      |\n   | --------------------- | ------- | ---- | ----------------------------------------- |\n   | src                   | String  | 是   | 图片链接               |\n   | placeholder           | String | 否   | 占位图片链接          |\n   | mode                | String  | 否   | 请参考 image 组件 mode 属性    |\n   | webp                 | Number  | 否   | 请参考 image 组件 webp 属性 |\n   | showMenuByLongpress    | Boolean | 否   | 请参考 image 组件 show-menu-by-longpress 属性        |\n   | styles            | String  | 否   | 设置图片样式       |\n   | viewport              | Object  | 否   | 默认为 {bottom: 0}，配置图片显示区域        |\n\n   **mina-lazy-image 外部样式类**\n\n  `image-class`, `image-container-class`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexayan%2Fmina-lazy-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexayan%2Fmina-lazy-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexayan%2Fmina-lazy-image/lists"}