{"id":13759368,"url":"https://github.com/vb/lazyframe","last_synced_at":"2025-05-10T09:32:26.223Z","repository":{"id":40747754,"uuid":"68630612","full_name":"vb/lazyframe","owner":"vb","description":"🛀🏽 Dependency-free library for lazyloading iframes","archived":false,"fork":false,"pushed_at":"2023-09-15T10:30:21.000Z","size":867,"stargazers_count":383,"open_issues_count":14,"forks_count":55,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-11T07:29:10.162Z","etag":null,"topics":["es6","iframe","javascript","lazyloading","vimeo","youtube"],"latest_commit_sha":null,"homepage":"https://vb.github.io/lazyframe/","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/vb.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}},"created_at":"2016-09-19T17:44:03.000Z","updated_at":"2025-03-19T12:40:32.000Z","dependencies_parsed_at":"2024-01-18T04:40:18.793Z","dependency_job_id":null,"html_url":"https://github.com/vb/lazyframe","commit_stats":{"total_commits":120,"total_committers":14,"mean_commits":8.571428571428571,"dds":"0.31666666666666665","last_synced_commit":"b60abf5986178e1af2b7d68d4086081143fcc330"},"previous_names":["viktorbergehall/lazyframe"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vb%2Flazyframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vb%2Flazyframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vb%2Flazyframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vb%2Flazyframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vb","download_url":"https://codeload.github.com/vb/lazyframe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253397075,"owners_count":21901991,"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":["es6","iframe","javascript","lazyloading","vimeo","youtube"],"created_at":"2024-08-03T13:00:51.766Z","updated_at":"2025-05-10T09:32:25.814Z","avatar_url":"https://github.com/vb.png","language":"JavaScript","readme":"# Lazyframe\n[![Node.js Package](https://github.com/vb/lazyframe/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/vb/lazyframe/actions/workflows/npm-publish.yml)\n[![npm version](https://badge.fury.io/js/lazyframe.svg)](https://badge.fury.io/js/lazyframe)\n\nDependency-free library for lazyloading iframes. [Demo](https://vb.github.io/lazyframe/)\n\n## Why?\n\nBecause embedded content takes time to load.\n\n- **Youtube** – 11 requests ≈ 580kb\n- **Google maps** – 52 requests ≈ 580kb\n- **Vimeo** – 8 requests ≈ 145kb\n\nLazyframe creates a responsive placeholder for embedded content and requests it when the user interacts with it. This decreases the page load and idle time.\n\nLazyframe comes with brand-like themes for Youtube and Vimeo.\n\n1. [Install](#install)\n2. [Import](#import)\n3. [Initialize](#Initialize)\n4. [Options](#options)\n\n### Install\n\nNPM\n\n```bash\n$ npm install lazyframe --save\n```\n\nBower\n\n```bash\n$ bower install lazyframe\n```\n\n### Import\n\nJavaScript ES6 imports\n\n```js\nimport lazyframe from \"lazyframe\";\n```\n\nInclude JavaScript in html\n\n```html\n\u003cscript src=\"dist/lazyframe.min.js\"\u003e\u003c/script\u003e\n```\n\nSass import\n\n```sass\n@import 'src/scss/lazyframe'\n```\n\nInclude css in html\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/lazyframe.css\" /\u003e\n```\n\n### Initialize\n\n```js\n// Passing a selector\nlazyframe(\".lazyframe\");\n\n// Passing a nodelist\nlet elements = document.querySelectorAll(\".lazyframe\");\nlazyframe(elements);\n\n// Passing a jQuery object\nlet elements = $(\".lazyframe\");\nlazyframe(elements);\n```\n\n## Options\n\nYou can pass general options to lazyframe on initialization. Element-specific options (most options) are set on data attributes on the element itself.\n\nGeneral options and corresponding defaults\n\n```js\nlazyframe(elements, {\n  debounce: 250,\n  lazyload: true,\n  autoplay: true,\n\n  // Callbacks\n  onLoad: (lazyframe) =\u003e console.log(lazyframe),\n  onAppend: (iframe) =\u003e console.log(iframe),\n  onThumbnailLoad: (img) =\u003e console.log(img),\n});\n```\n\n### `debounce`\n\nValue (in milliseconds) for when the update function should run after the user has scrolled. [More here](https://css-tricks.com/the-difference-between-throttling-and-debouncing/)\n\n### `lazyload`\n\nSet this to `false` if you want all API calls and local images to be loaded on page load (instead of when the element is in view).\n\n### `autoplay`\n\nSet this to `false` to remove autoplay from the `allow` attribute on the iframe tag i.e if set this to `false` if you want don't want your Youtube video to automatically start playing once the user clicks on the play icon.\n\n### `onLoad`\n\nCallback function for when a element is initialized.\n\n### `onAppend`\n\nCallback function for when the iframe is appended to DOM.\n\n### `onThumbnailLoad`\n\nCallback function with the thumbnail URL\n\n## Element-specific options\n\n```html\n\u003cdiv\n  class=\"lazyframe\"\n  data-vendor=\"\"\n  data-title=\"\"\n  data-thumbnail=\"\"\n  data-src=\"\"\n  data-ratio=\"1:1\"\n  data-initinview=\"false\"\n  data-autoplay=\"false\"\n\u003e\u003c/div\u003e\n```\n\n### `data-vendor`\n\nAttribute for theming lazyframe. Currently supported values are `youtube`, `youtube_nocookie` and `vimeo`.\n\n### `data-title`\n\nAttribute for custom title. Leave empty to get value from noembed.com.\n\n### `data-thumbnail`\n\nAttribute for custom thumbnail. Leave empty to get value from noembed.com.\n\n### `data-src`\n\nThe source of what you want to lazyload.\n\n### `data-ratio`\n\nThe ratio of the lazyframe. Possible values: 16:9, 4:3, 1:1\n\n### `data-initinview`\n\nSet this to true if you want the resource to execute (for example video to play) when the element is in view.\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT). © 2016 Viktor Bergehall\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvb%2Flazyframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvb%2Flazyframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvb%2Flazyframe/lists"}