{"id":16434215,"url":"https://github.com/lzxb/lazy-load-img","last_synced_at":"2025-04-05T07:05:22.924Z","repository":{"id":112517716,"uuid":"44784526","full_name":"lzxb/lazy-load-img","owner":"lzxb","description":"原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用","archived":false,"fork":false,"pushed_at":"2018-09-16T17:50:51.000Z","size":6808,"stargazers_count":365,"open_issues_count":0,"forks_count":134,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-03-29T06:08:36.504Z","etag":null,"topics":["angular","angular-lazy","react","react-lazy","vue","vue-lazy-load-img","vue-lazyload"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lzxb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-10-23T01:54:48.000Z","updated_at":"2024-11-27T15:10:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"c0d21fc3-5c16-49a1-ba49-bf0d8007042d","html_url":"https://github.com/lzxb/lazy-load-img","commit_stats":{"total_commits":89,"total_committers":3,"mean_commits":"29.666666666666668","dds":0.0561797752808989,"last_synced_commit":"f31b55871d4f32dbf3911bfe174e8b6fd27dc2e3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Flazy-load-img","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Flazy-load-img/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Flazy-load-img/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Flazy-load-img/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lzxb","download_url":"https://codeload.github.com/lzxb/lazy-load-img/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299832,"owners_count":20916190,"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":["angular","angular-lazy","react","react-lazy","vue","vue-lazy-load-img","vue-lazyload"],"created_at":"2024-10-11T08:48:31.128Z","updated_at":"2025-04-05T07:05:22.904Z","avatar_url":"https://github.com/lzxb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n [![npm](https://img.shields.io/npm/v/lazy-load-img.svg?style=flat-square)](https://www.npmjs.com/package/lazy-load-img) [![npm](https://img.shields.io/npm/dt/lazy-load-img.svg?style=flat-square)](https://www.npmjs.com/package/lazy-load-img) \n\n\n\n### 安装\n```\n  npm install lazy-load-img --save\n```\n\n### 优势\n```\n1.原生js开发，不依赖任何框架或库\n2.支持将各种宽高不一致的图片，自动剪切成默认图片的宽高\n  比如说你的默认图片是一张正方形的图片，则各种宽度高度不一样的图片，自动剪切成正方形。\n  完美解决移动端开发中，用户上传图片宽高不一致而导致的图片变形的问题\n3.简洁的API，让你分分钟入门！！！\n```\n\n\n### 默认模式\n```javascript\n  var lazyLoadImg = new LazyLoadImg({\n      el: document.querySelector('#list'),\n      mode: 'default', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分\n      time: 300, // 设置一个检测时间间隔\n      done: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁\n      position: { // 只要其中一个位置符合条件，都会触发加载机制\n          top: 0, // 元素距离顶部\n          right: 0, // 元素距离右边\n          bottom: 0, // 元素距离下面\n          left: 0 // 元素距离左边\n      },\n      before: function () {\n\n      },\n      success: function (el) {\n          el.classList.add('success')\n      },\n      error: function (el) {\n          el.src = './images/error.png'\n      }\n  })\n  \n  // lazyLoadImg.start() // 重新开启懒加载程序\n  // lazyLoadImg.destroy() // 销毁图片懒加载程序\n```\n\n\n\n#### 效果演示\n[![demo](https://github.com/lzxb/lazy-load-img/raw/master/shot/mode-default.png)](http://lzxb.github.io/lazy-load-img/examples/mode-default.html)\n\n\n\n### 自定义模式\n```javascript\n  var lazyLoadImg = new LazyLoadImg({\n      el: document.querySelector('#list'),\n      mode: 'diy', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分\n      time: 300, // 设置一个检测时间间隔\n      done: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁\n      position: { // 只要其中一个位置符合条件，都会触发加载机制\n          top: 0, // 元素距离顶部\n          right: 0, // 元素距离右边\n          bottom: 0, // 元素距离下面\n          left: 0 // 元素距离左边\n      },\n      diy: { //设置图片剪切规则，diy模式时才有效果\n          backgroundSize: 'cover',\n          backgroundRepeat: 'no-repeat',\n          backgroundPosition: 'center center'\n      },\n      before: function () {\n\n      },\n      success: function (el) {\n          el.classList.add('success')\n      },\n      error: function (el) {\n          el.src = './images/error.png'\n      }\n  })\n\n  // lazyLoadImg.start() // 重新开启懒加载程序\n  // lazyLoadImg.destroy() // 销毁图片懒加载程序\n``` \n\n\n\n#### 效果演示\n [![demo](https://github.com/lzxb/lazy-load-img/raw/master/shot/mode-diy.png)](http://lzxb.github.io/lazy-load-img/examples/mode-diy.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flzxb%2Flazy-load-img","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flzxb%2Flazy-load-img","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flzxb%2Flazy-load-img/lists"}