├── .travis.yml ├── .gitignore ├── .editorconfig ├── dist ├── onloaded.min.js ├── onloaded.es.js └── onloaded.js ├── src └── index.js ├── package.json ├── license └── readme.md /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 6 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *.lock 4 | *.log 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = tab 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.{json,yml,md}] 13 | indent_style = space 14 | -------------------------------------------------------------------------------- /dist/onloaded.min.js: -------------------------------------------------------------------------------- 1 | !function(n,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o():"function"==typeof define&&define.amd?define(o):n.onloaded=o()}(this,function(){"use strict";function n(){}var o=function(n,o){for(var e=0,t=n.length;e { 37 | el.onload = onload; 38 | el.onerror = onerror; 39 | }); 40 | } 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "onloaded", 3 | "version": "1.0.0", 4 | "description": "A tiny (350B) library to detect when images have loaded.", 5 | "repository": "lukeed/onloaded", 6 | "umd:main": "dist/onloaded.min.js", 7 | "module": "dist/onloaded.es.js", 8 | "main": "dist/onloaded.js", 9 | "license": "MIT", 10 | "author": { 11 | "name": "Luke Edwards", 12 | "email": "luke.edwards05@gmail.com", 13 | "url": "lukeed.com" 14 | }, 15 | "engines": { 16 | "node": ">=4" 17 | }, 18 | "scripts": { 19 | "build": "node builder", 20 | "pretest": "npm run build", 21 | "test": "mocha test/*.js" 22 | }, 23 | "files": [ 24 | "dist" 25 | ], 26 | "keywords": [], 27 | "dependencies": { 28 | "@arr/foreach": "^1.0.0" 29 | }, 30 | "devDependencies": { 31 | "gzip-size": "^3.0.0", 32 | "mocha": "^3.4.2", 33 | "pretty-bytes": "^4.0.2", 34 | "rollup": "^0.45.2", 35 | "rollup-plugin-buble": "^0.15.0", 36 | "rollup-plugin-node-resolve": "^3.0.0", 37 | "uglify-js": "^2.8.22" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /dist/onloaded.es.js: -------------------------------------------------------------------------------- 1 | var forEach = function (arr, fn) { 2 | var i=0, len=arr.length; 3 | 4 | for (; i < len; i++) { 5 | fn(arr[i], i, arr); 6 | } 7 | }; 8 | 9 | function noop() {} 10 | 11 | var index = function (elem, opts) { 12 | opts = opts || {}; 13 | 14 | if (typeof elem == 'string') { 15 | elem = document.querySelectorAll(elem); 16 | } else if (elem.length == void 0) { 17 | if (elem.nodeName == 'IMG') { 18 | elem = [elem]; // was single img 19 | } else { 20 | elem = elem.getElementsByTagName('img'); 21 | } 22 | } 23 | 24 | var ok = 0; 25 | var err = 0; 26 | var total = elem.length; 27 | 28 | function isDone() { 29 | var perc = (ok + err) / total; 30 | var func = perc === 1 ? opts.onComplete : opts.onProgress; 31 | (func || noop)(perc, { failed:err, loaded:ok, total: total }); 32 | } 33 | 34 | function onload() { 35 | ok++; (opts.onLoad || noop)(this); isDone(); 36 | } 37 | 38 | function onerror() { 39 | err++; (opts.onError || noop)(this); isDone(); 40 | } 41 | 42 | forEach(elem, function (el) { 43 | el.onload = onload; 44 | el.onerror = onerror; 45 | }); 46 | }; 47 | 48 | export default index; 49 | -------------------------------------------------------------------------------- /dist/onloaded.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var forEach = function (arr, fn) { 4 | var i=0, len=arr.length; 5 | 6 | for (; i < len; i++) { 7 | fn(arr[i], i, arr); 8 | } 9 | }; 10 | 11 | function noop() {} 12 | 13 | var index = function (elem, opts) { 14 | opts = opts || {}; 15 | 16 | if (typeof elem == 'string') { 17 | elem = document.querySelectorAll(elem); 18 | } else if (elem.length == void 0) { 19 | if (elem.nodeName == 'IMG') { 20 | elem = [elem]; // was single img 21 | } else { 22 | elem = elem.getElementsByTagName('img'); 23 | } 24 | } 25 | 26 | var ok = 0; 27 | var err = 0; 28 | var total = elem.length; 29 | 30 | function isDone() { 31 | var perc = (ok + err) / total; 32 | var func = perc === 1 ? opts.onComplete : opts.onProgress; 33 | (func || noop)(perc, { failed:err, loaded:ok, total: total }); 34 | } 35 | 36 | function onload() { 37 | ok++; (opts.onLoad || noop)(this); isDone(); 38 | } 39 | 40 | function onerror() { 41 | err++; (opts.onError || noop)(this); isDone(); 42 | } 43 | 44 | forEach(elem, function (el) { 45 | el.onload = onload; 46 | el.onerror = onerror; 47 | }); 48 | }; 49 | 50 | module.exports = index; 51 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Luke Edwards (lukeed.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # onloaded 2 | 3 | > A tiny (350B) library to detect when images have loaded 4 | 5 | [Demo](https://jsfiddle.net/lukeed/8njejbjz/) 6 | 7 | This module exposes three module definitions: 8 | 9 | * **ES Module**: `dist/onloaded.es.js` 10 | * **CommonJS**: `dist/onloaded.js` 11 | * **UMD**: `dist/onloaded.min.js` 12 | 13 | If using the UMD bundle, the library is exposed as `onloaded` globally. 14 | 15 | 16 | ## Install 17 | 18 | ``` 19 | $ npm install --save onloaded 20 | ``` 21 | 22 | 23 | ## Usage 24 | 25 | ```js 26 | const onloaded = require('onloaded'); 27 | 28 | // passing a selector to `elem` 29 | onloaded('#container > img', { 30 | onLoad(img) { 31 | img.className += ' loaded'; 32 | }, 33 | onError(img) { 34 | img.className += ' failed'; 35 | }, 36 | onProgress(val) { 37 | console.log(`I am ${ val * 100 }% complete!`); 38 | }, 39 | onComplete(val, stats) { 40 | // val is always 1 ~~> 100% 41 | console.log('This callback always runs!'); 42 | console.log(` ${stats.loaded} loaded`); 43 | console.log(` ${stats.failed} failed`); 44 | console.log(` ${stats.total} total`); 45 | } 46 | }); 47 | ``` 48 | 49 | > **Note:** Visit [`elem`](#elem) for other possibilities! 50 | 51 | 52 | ## API 53 | 54 | ### onloaded(elem, options) 55 | 56 | #### elem 57 | 58 | Type: `String|Node|NodeList` 59 | 60 | You have several options here: 61 | 62 | 1. Pass a selector string to `img` element(s); 63 | ```js 64 | onloaded('.container img', { ... }); 65 | ``` 66 | 67 | 2. Pass a reference to a specific `` DOM Node; 68 | ```js 69 | var img = document.querySelector('.container img'); 70 | onloaded(img, { ... }); 71 | ``` 72 | 73 | 3. Pass a reference to a multiple `` DOM Nodes; 74 | ```js 75 | var imgs = document.querySelectorAll('.container img'); 76 | onloaded(imgs, { ... }); 77 | ``` 78 | 79 | 4. Pass a reference to a container DOM Node that contains `` elements; 80 | ```js 81 | var parent = document.querySelector('.container'); 82 | onloaded(parent, { ... }); 83 | ``` 84 | 85 | #### options.onError(node) 86 | 87 | Type: `Function` 88 | 89 | Callback whenever an image source failed to load. Receives the `` DOM node; 90 | 91 | #### options.onLoad(node) 92 | 93 | Type: `Function` 94 | 95 | Callback whenever an image source sucessfully loads. Receives the `` DOM node; 96 | 97 | #### options.onProgress(val, stats) 98 | 99 | Type: `Function` 100 | 101 | Callback whenever an image's network request has completed, regardless of success or failure. 102 | 103 | Receives the current "progress" of completed requests as a decimal. 104 | 105 | Also receives a `stats` object with `loaded`, `failed`, and `total` keys. 106 | 107 | #### options.onComplete(val, stats) 108 | 109 | Type: `Function` 110 | 111 | Callback when _all_ network requests have completed, regardless of success or failure. 112 | 113 | Receives the "progress" as its first parameter. This will always equal `1`. 114 | 115 | Also receives a `stats` object with `loaded`, `failed`, and `total` keys. 116 | 117 | 118 | ## License 119 | 120 | MIT © [Luke Edwards](https://lukeed.com) 121 | --------------------------------------------------------------------------------