{"id":16124296,"url":"https://github.com/jongacnik/mbl","last_synced_at":"2025-03-18T12:31:39.077Z","repository":{"id":19797466,"uuid":"23057092","full_name":"jongacnik/mbl","owner":"jongacnik","description":"(Mad Basic Loader) loads dom images","archived":false,"fork":false,"pushed_at":"2017-02-17T02:37:13.000Z","size":40,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-16T20:05:01.492Z","etag":null,"topics":[],"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/jongacnik.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}},"created_at":"2014-08-18T03:13:29.000Z","updated_at":"2025-03-13T10:37:12.000Z","dependencies_parsed_at":"2022-08-21T14:40:34.799Z","dependency_job_id":null,"html_url":"https://github.com/jongacnik/mbl","commit_stats":null,"previous_names":["amongiants/mbl"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fmbl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fmbl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fmbl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fmbl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jongacnik","download_url":"https://codeload.github.com/jongacnik/mbl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244222507,"owners_count":20418527,"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-10-09T21:20:28.878Z","updated_at":"2025-03-18T12:31:38.706Z","avatar_url":"https://github.com/jongacnik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MBL (Mad Basic Loader)\n\nMBL gives better control over image loading in the browser. Images can be loaded all at once or sequentially, they can be rendered as an image or set as the background image of an element. Callbacks/events are fired once image loading begins, as each image succeeds or fails, and once all images have loaded.\n\nBuilt on top of [imgload](https://www.npmjs.com/package/imgload) for simple image loading events.\n\n## Getting Started\n\nMBL is meant to be consumed in a [CommonJS](http://www.commonjs.org/), [Browserify](http://browserify.org/) environment (though you can also use a pre-bundled version, more below):\n\n\tnpm install mbl\n\n## Usage\n\n**Example HTML**\n\n\t\u003cimg data-src=\"image.jpg\" data-mbl\u003e\n\t\u003cimg data-src=\"other.jpg\" data-mbl\u003e\n\n**Javascript**\n\n\t// require\n\tvar mbl = require('mbl')\n\n\t// gather some images\n\tvar images = document.querySelectorAll('[data-mbl]')\n\n\t// setup\n\tvar imageload = mbl(images)\n\n\t// start!\n\timageload.start()\n\n### Options\n\nYou can get more specific if you want (the following are defaults):\n\n\tvar imageload = mbl(images, {\n\t\tsourceAttr : 'data-src' // attribute containing image source\n\t\tsequential : false, // sequential mode (details below)\n\t\tmode       : 'src', // mbl mode (details below)\n\t\tsuccess    : function(elem) { }, // on each image load\n\t\terror      : function(elem) { }, // on each image error\n\t\tbegin      : function() { } // once loading begins\n\t\tcomplete   : function() { } // once all images have completed\n\t})\n\n### Events\n\nEvents are also triggered along with the callbacks. Bind to events like so:\n\n\timageload.on('success', function(data) {\n\t\t// triggered on each image successful load\n\t})\n\n\timageload.on('error', function(data) {\n\t\t// triggered on each image error\n\t})\n\n\timageload.on('begin', function() {\n\t\t// triggered when loading begins\n\t})\n\n\timageload.on('complete', function() {\n\t\t// triggered when all images have completed\n\t})\n\n## What happens to the DOM\n\nExample HTML from above:\n\n\t\u003cimg data-src=\"image.jpg\" data-mbl\u003e\n\t\u003cimg data-src=\"other.jpg\" data-mbl\u003e\n\nafter MBL completes (assuming success) DOM becomes:\n\n\t\u003cimg data-src=\"image.jpg\" src=\"image.jpg\" data-mbl-complete\u003e\n\t\u003cimg data-src=\"other.jpg\" src=\"other.jpg\" data-mbl-complete\u003e\n\n## More about options\n\n### Sequential\n\nIf `sequential` is set to **true**, the images are loaded sequentially, one by one. Each image waits for the prior to complete (success or error) before beginning to load. Handy when a linear load sequence is desired, or load throttling for some other reason:\n\n\t\u003cimg data-src=\"image.jpg\" data-mbl\u003e\n\t\u003cimg data-src=\"other.jpg\" data-mbl\u003e // waits for image.jpg\n\t\u003cimg data-src=\"third.jpg\" data-mbl\u003e // waits for other.jpg\n\t// etc...\n\n### Loading Mode ( src | background | load )\n\nMode | Behavior\n--- | ---\n`src` | source of the loaded image is set as the `src` attribute\n`background` | source of the loaded image is set as the `background-image` style attribute\n`load` | no DOM changes, but callbacks/events fired\n\nThis setting is handy for responsive images using `background-size: cover;`\n\n\t\u003cspan data-src=\"image.jpg\" data-mbl\u003e\u003c/span\u003e\n\t\u003cspan data-src=\"other.jpg\" data-mbl\u003e\u003c/span\u003e\n\nafter MBL completes (assuming success) with `mode: background` DOM becomes:\n\n\t\u003cspan\n\t\tdata-src=\"image.jpg\"\n\t\tstyle=\"background-image:url('image.jpg');\"\n\t\tdata-mbl-complete\n\t\u003e\u003c/span\u003e\n\t\u003cspan\n\t\tdata-src=\"other.jpg\"\n\t\tstyle=\"background-image:url('other.jpg');\"\n\t\tdata-mbl-complete\n\t\u003e\u003c/span\u003e\n\nThe mode can also be changed on an element basis by adding an attribute to the element:\n\n\t\u003cimg\n\t\tdata-src=\"image.jpg\"\n\t\tdata-mbl-mode=\"src|background|load\"\n\t\u003e\n\n## Bundled Version\n\nIf you don't want to mess with a build process you can also include the pre-bundled version found in `dist/mbl.bundled.js` in your project which exposes `mbl()` globally.\n\n## jQuery\n\nThere's still an old jQuery version of MBL in `dist` as well. This hasn't been maintained but it's there for tinkering. Usage is:\n\n\tvar mbl = require('mbl/jquery.mbl.js'); // or just include as a script tag\n\n\t$('[data-mbl]').mbl({\n\t\t'sequential' : false,\n\t\t'bgMode'     : false,\n\t\t'success'    : function(index, elem) { },\n\t\t'error'      : function(index, elem) { },\n\t\t'begin'      : function() { }\n\t\t'complete'   : function() { }\n\t})\n\n## Todo\n\n- Sequential image throttling\n- Pause / resume sequential loads\n- Tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongacnik%2Fmbl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjongacnik%2Fmbl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongacnik%2Fmbl/lists"}