{"id":14482676,"url":"https://github.com/vvo/lazyload","last_synced_at":"2025-05-15T18:09:01.408Z","repository":{"id":2361319,"uuid":"3325000","full_name":"vvo/lazyload","owner":"vvo","description":":bullettrain_front: Lazyload images, iframes, widgets with a standalone JavaScript lazyloader","archived":false,"fork":false,"pushed_at":"2021-02-16T10:30:28.000Z","size":5562,"stargazers_count":937,"open_issues_count":9,"forks_count":151,"subscribers_count":35,"default_branch":"master","last_synced_at":"2025-05-07T23:26:32.866Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vvo.github.io/lazyload/","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/vvo.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-02-01T13:26:47.000Z","updated_at":"2025-03-29T07:59:36.000Z","dependencies_parsed_at":"2022-08-06T12:15:15.140Z","dependency_job_id":null,"html_url":"https://github.com/vvo/lazyload","commit_stats":null,"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vvo%2Flazyload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vvo%2Flazyload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vvo%2Flazyload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vvo%2Flazyload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vvo","download_url":"https://codeload.github.com/vvo/lazyload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253465732,"owners_count":21913027,"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":[],"created_at":"2024-09-03T00:01:13.704Z","updated_at":"2025-05-15T18:09:01.373Z","avatar_url":"https://github.com/vvo.png","language":"JavaScript","readme":"**NOTE FROM MAINTAINERS**\nThis library is still working but not actively maintained, we recommend you use https://github.com/ApoorvSaxena/lozad.js first rather than this one.\n**/NOTE FROM MAINTAINERS**\n\n# lazyload [![Dependency Status](http://img.shields.io/david/vvo/lazyload.svg?style=flat-square)](https://david-dm.org/vvo/lazyload) [![devDependency Status](http://img.shields.io/david/dev/vvo/lazyload.svg?style=flat-square)](https://david-dm.org/vvo/lazyload#info=devDependencies)\n\nLazyload images, iframes or any src* element until they are visible in the viewport.\n\n[![Selenium Test Status](https://saucelabs.com/browser-matrix/lazyloadvvo.svg)](https://saucelabs.com/u/lazyloadvvo)\n\n## Install\n\n```shell\nnpm install lazyloadjs --save\n```\n\nAlso available for `\u003cscript\u003e` users:\n  - https://cdnjs.com/libraries/lazyloadjs\n\n## Simple example\n\nSee more [examples](examples/).\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003elazyload\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"lazyload.min.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- A lot of content --\u003e\n    \u003c!-- A lot of content --\u003e\n\n    \u003cimg\n      data-src=\"real/image/src.jpg\"\n      src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"\n      onload=\"lzld(this)\"\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nMake sure your webpage is in [standards mode](http://en.wikipedia.org/wiki/Document_Type_Declaration#HTML5_DTD-less_DOCTYPE).\n\nViewport computing is badly handled by browsers when in [quirksmode](http://en.wikipedia.org/wiki/Quirks_mode).\n\nIf you do not want to use a data-uri as your src, you can also use the provided [b.gif](b.gif) which is\nthe [tiniest gif ever](http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever).\n\nOn most websites, you better let the first top images not bound to lzld method.\nSo that they shows really fast.\n\n## Advanced example\n\n`lazyloadjs` is an npm module and is compatible with browserify.\n\n```js\nglobal.myLazyload = require('lazyloadjs')();\n```\n\n```html\n\u003cimg\n  data-src=\"real/image/src.jpg\"\n  src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"\n  onload=\"myLazyload(this)\"\u003e\n```\n\nPer default, `lazyloadjs` exposes the `lzld` instance on the global\nobject. So that in most cases, you just need to require it in your webpage.\n\n## API\n\n## var lzld = lazyload([opts])\n\n`opts` is an object with these defaults:\n\n```js\n{\n  container: document.body,\n  offset: 333,\n  src: 'data-src' // or function(elt) { return customSrc }\n}\n```\n\n`opts.container` is the referencing container, it's the viewport, defaults to `document.body`\n\n`opts.offset` is a length in pixels used to compute when an element will\nsoon be visible. So that you load it just before it becomes visible.\n\n`src` is the attribute name storing the real src of the element to load.\n\n`src` can also be a `function`, so that you can have your custom `src` computing algorithm.\nYou can use it to [lazyload High DPI/retina images](examples/hidpi.html).\n\n## Launching the examples\n\n```shell\nnpm run examples\n```\n\n## Developing\n\nLaunch the dev server:\n\n```shell\nnpm run dev\n```\n\nBrowse to [http://localhost:8080/__zuul](http://localhost:8080/__zuul).\n\n[Tests](test/) are written with [mocha](https://github.com/visionmedia/mocha).\n\n## Building\n\nWe provide a pre-built version of `lazyloadjs` in `build/lazyload.min.js`.\n\nBut you can build your own:\n\n```shell\nnpm run build\n```\n\nYou get the build in `build/lazyload.min.js`.\n\nPlease consider using [browserify](https://github.com/substack/node-browserify).\n\n## Sites using lazyload\n\nTens of millions of pageviews are served each month using this project:\n\n* [fasterize.com](http://fasterize.com) `lazyload` was first developed at fasterize (WPO solution)\n* [lemonde.fr](http://www.lemonde.fr)\n* [pluzz.francetv.fr](http://pluzz.francetv.fr)\n* [pcinpact.com](http://www.pcinpact.com)\n* [elpais.com](http://www.elpais.com)\n* [playtv.fr](http://playtv.fr)\n* [voyages-sncf.com](http://www.voyages-sncf.com)\n* [rue89.com](http://www.rue89.com)\n* [flipkart.com](http://www.flipkart.com/)\n* [clubic.com](http://clubic.com)\n* [achetezfacile.com](http://www.achetezfacile.com/)\n* [mapado.com](http://www.mapado.com/)\n* [decitre.fr](http://www.decitre.fr/)\n* [base-orb.fr](http://www.base-orb.fr/)\n* [nearbuy.com](http://www.nearbuy.com/)\n* [winni.in](https://www.winni.in)\n* [giftzbag.com](https://www.giftzbag.com)\n* [younetworth.com](https://younetworth.com/)\n\n.. And many unlisted websites, [add yours](https://github.com/vvo/lazyload/edit/master/README.md)!\n\n## Licence\n\nAlso see [LICENCE.fasterize](LICENCE.fasterize)\n\n(The MIT Licence)\n\nCopyright (c) Vincent Voyer\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","funding_links":[],"categories":["Lazyloaders","JavaScript","13. 页面交互"],"sub_categories":["Meetups","13.3 懒加载/加载监听/预加载 ###","13.3 懒加载/加载监听/预加载"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvvo%2Flazyload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvvo%2Flazyload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvvo%2Flazyload/lists"}