{"id":13495210,"url":"https://github.com/toddmotto/echo","last_synced_at":"2025-05-12T20:51:43.622Z","repository":{"id":9993593,"uuid":"12025365","full_name":"toddmotto/echo","owner":"toddmotto","description":"Lazy-loading images with data-* attributes","archived":false,"fork":false,"pushed_at":"2024-11-08T06:12:42.000Z","size":113,"stargazers_count":3714,"open_issues_count":83,"forks_count":503,"subscribers_count":107,"default_branch":"master","last_synced_at":"2025-04-23T18:41:50.421Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://toddmotto.com/labs/echo","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/toddmotto.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-08-10T18:59:23.000Z","updated_at":"2025-03-23T05:55:30.000Z","dependencies_parsed_at":"2023-01-13T15:40:58.537Z","dependency_job_id":"81bb015e-22f3-4b3b-b53a-7d2a83d23e03","html_url":"https://github.com/toddmotto/echo","commit_stats":{"total_commits":60,"total_committers":19,"mean_commits":"3.1578947368421053","dds":0.7333333333333334,"last_synced_commit":"bf74b5c60dfadcbcd816e3c107b148e1b557e738"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddmotto%2Fecho","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddmotto%2Fecho/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddmotto%2Fecho/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toddmotto%2Fecho/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toddmotto","download_url":"https://codeload.github.com/toddmotto/echo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253821234,"owners_count":21969665,"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-07-31T19:01:32.486Z","updated_at":"2025-05-12T20:51:43.566Z","avatar_url":"https://github.com/toddmotto.png","language":"JavaScript","readme":"# Echo.js [![Build Status](https://travis-ci.org/toddmotto/echo.svg)](https://travis-ci.org/toddmotto/echo)\n\nEcho is a standalone JavaScript lazy-loading image micro-library. Echo is fast, 2KB, and uses HTML5 data-* attributes for simple. Check out a [demo](http://toddmotto.com/labs/echo). Echo works in IE8+.\n\n```\nbower install echojs\nnpm install echo-js\n```\n\nUsing Echo.js is simple, to add an image directly into the page simply add a `data-echo` attribute to the img tag. Alternatively if you want to use Echo to lazy load background images simply add a `data-echo-background' attribute to the element with the image URL.\n\n```html\n\u003cbody\u003e\n\n  \u003cimg src=\"img/blank.gif\" alt=\"Photo\" data-echo=\"img/photo.jpg\"\u003e\n\n  \u003cscript src=\"dist/echo.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n  echo.init({\n    offset: 100,\n    throttle: 250,\n    unload: false,\n    callback: function (element, op) {\n      console.log(element, 'has been', op + 'ed')\n    }\n  });\n\n  // echo.render(); is also available for non-scroll callbacks\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n## .init() (options)\n\nThe `init()` API takes a few options\n\n#### offset\nType: `Number|String` Default: `0`\n\nThe `offset` option allows you to specify how far below, above, to the left, and to the right of the viewport you want Echo to _begin_ loading your images. If you specify `0`, Echo will load your image as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`.\n\n#### offsetVertical\nType: `Number|String` Default: `offset`'s value\n\nThe `offsetVertical` option allows you to specify how far above and below the viewport you want Echo to _begin_ loading your images.\n\n#### offsetHorizontal\nType: `Number|String` Default: `offset`'s value\n\nThe `offsetHorizontal` option allows you to specify how far to the left and right of the viewport you want Echo to _begin_ loading your images.\n\n#### offsetTop\nType: `Number|String` Default: `offsetVertical`'s value\n\nThe `offsetTop` option allows you to specify how far above the viewport you want Echo to _begin_ loading your images.\n\n#### offsetBottom\nType: `Number|String` Default: `offsetVertical`'s value\n\nThe `offsetBottom` option allows you to specify how far below the viewport you want Echo to _begin_ loading your images.\n\n#### offsetLeft\nType: `Number|String` Default: `offsetVertical`'s value\n\nThe `offsetLeft` option allows you to specify how far to left of the viewport you want Echo to _begin_ loading your images.\n\n#### offsetRight\nType: `Number|String` Default: `offsetVertical`'s value\n\nThe `offsetRight` option allows you to specify how far to the right of the viewport you want Echo to _begin_ loading your images.\n\n#### throttle\nType: `Number|String` Default: `250`\n\nThe throttle is managed by an internal function that prevents performance issues from continuous firing of `window.onscroll` events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is `250` milliseconds.\n\n#### debounce\nType: `Boolean` Default: `true`\n\nBy default the throttling function is actually a [debounce](http://underscorejs.org/#debounce) function so that the checking function is only triggered after a user stops scrolling. To use traditional throttling where it will only check the images every `throttle` milliseconds, set `debounce` to `false`.\n\n#### unload\nType: `Boolean` Default: `false`\n\nThis option will tell echo to unload loaded images once they have scrolled beyond the viewport (including the offset area).\n\n#### callback\nType: `Function`\n\nThe callback will be passed the element that has been updated and what the update operation was (ie `load` or `unload`). This can be useful if you want to add a class like `loaded` to the element. Or do some logging.\n\n```js\necho.init({\n  callback: function(element, op) {\n    if(op === 'load') {\n      element.classList.add('loaded');\n    } else {\n      element.classList.remove('loaded');\n    }\n  }\n});\n```\n\n## .render()\n\nEcho's callback `render()` can be used to make Echo poll your images when you're not scrolling, for instance if you've got a filter layout that swaps images but does not scroll, you need to call the internal functions without scrolling. Use `render()` for this:\n\n```js\necho.render();\n```\n\nUsing `render()` is also throttled, which means you can bind it to an `onresize` event and it will be optimised for performance in the same way `onscroll` is.\n\n## Manual installation\nDrop your files into your required folders, make sure you're using the file(s) from the `dist` folder, which is the compiled production-ready code. Ensure you place the script before the closing `\u003c/body\u003e` tag so the DOM tree is populated when the script runs.\n\n## Configuring Echo\nAdd the image that needs to load when it's visible inside the viewport in a `data-echo` attribute:\n\n```html\n\u003cimg src=\"img/blank.gif\" alt=\"Photo\" data-echo=\"img/photo.jpg\"\u003e\n```\n\n## Contributing\nIn lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Gulp.\n\n## License\nMIT license\n","funding_links":[],"categories":["Misc","JavaScript","Misc [🔝](#readme)","UI","13. 页面交互","大杂烩"],"sub_categories":["Other","其它","13.3 懒加载/加载监听/预加载 ###","13.3 懒加载/加载监听/预加载"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoddmotto%2Fecho","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoddmotto%2Fecho","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoddmotto%2Fecho/lists"}