{"id":13591850,"url":"https://github.com/alexanderdickson/waitForImages","last_synced_at":"2025-04-08T18:30:52.507Z","repository":{"id":1380340,"uuid":"1334165","full_name":"alexanderdickson/waitForImages","owner":"alexanderdickson","description":"A jQuery plugin that lets you attach callbacks to useful image loading events. ","archived":false,"fork":false,"pushed_at":"2022-05-30T09:26:01.000Z","size":249,"stargazers_count":1304,"open_issues_count":3,"forks_count":184,"subscribers_count":45,"default_branch":"master","last_synced_at":"2024-04-29T13:40:24.271Z","etag":null,"topics":["jquery-plugin"],"latest_commit_sha":null,"homepage":"http://alexanderdickson.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"deprecate/hub.me","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexanderdickson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-02-06T11:42:34.000Z","updated_at":"2024-04-28T06:27:26.000Z","dependencies_parsed_at":"2022-08-16T13:15:12.279Z","dependency_job_id":null,"html_url":"https://github.com/alexanderdickson/waitForImages","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderdickson%2FwaitForImages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderdickson%2FwaitForImages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderdickson%2FwaitForImages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderdickson%2FwaitForImages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexanderdickson","download_url":"https://codeload.github.com/alexanderdickson/waitForImages/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223339169,"owners_count":17129281,"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":["jquery-plugin"],"created_at":"2024-08-01T16:01:02.869Z","updated_at":"2024-11-06T12:32:04.056Z","avatar_url":"https://github.com/alexanderdickson.png","language":"JavaScript","readme":"# waitForImages\n\nCopyright (c) 2011-2018 Alexander Dickson [@alexdickson](http://twitter.com/alexdickson)\n\nLicensed under the [MIT licenses](https://raw.github.com/alexanderdickson/waitForImages/master/LICENSE-MIT).\n\n[http://alexanderdickson.com](http://alexanderdickson.com)\n\n[Donate!](http://paypal.me/alexwilliamdickson)\n\n\n[![Build Status](https://secure.travis-ci.org/alexanderdickson/waitForImages.svg)](http://travis-ci.org/alexanderdickson/waitForImages)\n\n## Overview\n\nProvides useful callbacks once descendant images have loaded.\n\nwaitForImages also supports both images referenced in CSS, such as the `background-image` property, and images referenced in element attributes such as `srcset`. Images referenced in attributes can also be a comma-separated list of images.\n\nIt can be useful when WebKit incorrectly reports element dimensions/offsets on document ready, because it has not calculated their descendant `img` dimensions yet.\n\nSupports all browsers you probably care about.\n\n## Get it\n\nYou can either grab the source yourself...\n\n- [Production (minified)](https://raw.github.com/alexanderdickson/waitForImages/master/dist/jquery.waitforimages.min.js)\n- [Development (unminified)](https://raw.github.com/alexanderdickson/waitForImages/master/dist/jquery.waitforimages.js)\n\n...or you can use a hosted version...\n\n- [Hosted on CDNJS (minified)](http://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/1.5.0/jquery.waitforimages.min.js)\n\nAlternatively, you can install with [`bower`](http://bower.io/)...\n\n```bash\nbower install waitForImages\n```\n\n...or [`npm`](https://www.npmjs.com/)...\n\n```bash\nnpm install jquery.waitforimages\n```\n\nOf course, these need to be loaded after `jQuery` is made available. The current version should be supported by at least jQuery 1.8, or perhaps earlier. If you find incompatibility issues, please check out a previous tagged version.\n\n## Usage\n\nThere are two ways to use waitForImages: with a standard callback system (previously the only API) or receiving a promise.\n\n### Standard\n\nJust provide a callback function and it will be called once all descendant images have loaded.\n\n```javascript\n$('selector').waitForImages(function() {\n    // All descendant images have loaded, now slide up.\n    $(this).slideUp();\n});\n```\n\nYou can also use the jQuery promise API.\n\n```javascript\n$('selector').waitForImages().done(function() {\n    // All descendant images have loaded, now slide up.\n    $(this).slideUp();\n});\n```\n\nIn the callbacks, `this` is a reference to the collection that `waitForImages()` was called on.\n\n### Advanced\n\nYou can pass a second function as a callback that will be called for each image that is loaded, with some information passed as arguments.\n\n```javascript\n$('selector').waitForImages(function() {\n    alert('All images have loaded.');\n}, function(loaded, count, success) {\n   alert(loaded + ' of ' + count + ' images has ' + (success ? 'loaded' : 'failed to load') +  '.');\n   $(this).addClass('loaded');\n});\n```\n\nUsing the jQuery promises API, you can then use the `progress()` method to know when an individual image has been loaded.\n\n```javascript\n$('selector').waitForImages().progress(function(loaded, count, success) {\n   alert(loaded + ' of ' + count + ' images has ' + (success ? 'loaded' : 'failed to load') +  '.');\n   $(this).addClass('loaded');\n});\n```\n\nYou can also set the third argument to `true` if you'd like the plugin to iterate over the collection and all descendent elements, checking for images referenced in the CSS (by default, it looks at the `background-image`, `list-style-image`, `border-image`, `border-corner-image` and `cursor` properties). If it finds any, they will be treated as a descendant image.\n\nThe callback will be called on the successful **and** unsuccessful loading of the image. Check the third argument to determine the success of the image load. It will be `true` if the image loaded successfully.\n\nIf you want to skip the first argument, pass `$.noop` or alternatively, pass an object literal to the plugin, instead of the arguments individually.\n\n```javascript\n$('selector').waitForImages({\n    finished: function() {\n        // ...\n    },\n    each: function() {\n       // ...\n    },\n    waitForAll: true\n});\n```\n\nTo use this with the promise API, simply pass one argument, which is `waitForAll`.\n\n```javascript\n$('selector').waitForImages(true).done(function() {\n    // ...\n});\n```\n\nYou may also set the CSS properties that possibly contain image references yourself. Just assign an array of properties to the plugin.\n\n```javascript\n$.waitForImages.hasImgProperties = ['backgroundImage'];\n```\n\nwaitForImages also exposes two custom selectors, `img:has-src` and `img:uncached`, (both used in conjunction with the `img` selector), which allow you to select `img` elements with a valid `src` attribute or that are not already cached already by the browser, respectively.\n\n```javascript\n$('img').not(':has-src').remove();\n$('img:uncached').attr('title', 'Loading Image');\n```\n\n## Feedback\n\nPlease use the [Issues](https://github.com/alexanderdickson/waitForImages/issues) for any bugs, feature requests, etc.\n\nIf you're having problems using the plugin, [ask a question on Stack Overflow](http://stackoverflow.com/questions/tagged/waitforimages).\n","funding_links":["http://paypal.me/alexwilliamdickson"],"categories":["Images","JavaScript","13. 页面交互"],"sub_categories":["Data Table","13.3 懒加载/加载监听/预加载 ###","13.3 懒加载/加载监听/预加载"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexanderdickson%2FwaitForImages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexanderdickson%2FwaitForImages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexanderdickson%2FwaitForImages/lists"}