{"id":42468745,"url":"https://github.com/krishcdbry/fancy-image-loader","last_synced_at":"2026-01-28T09:45:04.082Z","repository":{"id":57232706,"uuid":"120821036","full_name":"krishcdbry/fancy-image-loader","owner":"krishcdbry","description":"A generic React component to show a placeholder in place of an image while the image is loading and replace the placeholder with the image when the image has loaded.","archived":false,"fork":false,"pushed_at":"2018-02-22T01:59:05.000Z","size":316,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-09T06:06:58.262Z","etag":null,"topics":["imageloader","javascript","preloader","react","reactjs"],"latest_commit_sha":null,"homepage":"https://krishcdbry.github.io/fancy-image-loader/","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/krishcdbry.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}},"created_at":"2018-02-08T21:37:31.000Z","updated_at":"2018-02-16T18:09:04.000Z","dependencies_parsed_at":"2022-08-31T20:51:08.940Z","dependency_job_id":null,"html_url":"https://github.com/krishcdbry/fancy-image-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/krishcdbry/fancy-image-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krishcdbry%2Ffancy-image-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krishcdbry%2Ffancy-image-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krishcdbry%2Ffancy-image-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krishcdbry%2Ffancy-image-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krishcdbry","download_url":"https://codeload.github.com/krishcdbry/fancy-image-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krishcdbry%2Ffancy-image-loader/sbom","scorecard":{"id":569995,"data":{"date":"2025-08-11","repo":{"name":"github.com/krishcdbry/fancy-image-loader","commit":"4ec14203910533327c2b037f93bb46b2e6d8e62a"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/22 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"70 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-mvjj-gqq2-p4hw","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T16:04:50.518Z","repository_id":57232706,"created_at":"2025-08-20T16:04:50.518Z","updated_at":"2025-08-20T16:04:50.518Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28844008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T07:39:25.367Z","status":"ssl_error","status_checked_at":"2026-01-28T07:39:24.487Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["imageloader","javascript","preloader","react","reactjs"],"created_at":"2026-01-28T09:45:04.018Z","updated_at":"2026-01-28T09:45:04.074Z","avatar_url":"https://github.com/krishcdbry.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FIL (Fancy Image Loader) [![NPM version](https://img.shields.io/npm/v/fancy-image-loader.svg)](https://www.npmjs.com/package/fancy-image-loader)\n[![Downloads](http://img.shields.io/npm/dm/fancy-image-loader.svg)](https://npmjs.org/package/fancy-image-loader)\nA generic React component to show a placeholder in place of an image while the image is loading\nand replace the placeholder with the image when the image has loaded.\n\nFeatures:\n1. Placeholder can be another image or an HTML element\n2. You can style the placeholder/error element\n3. All attributes of \u003cimg\u003e tag are supported\n\n----------------------------------------------------------------------------------------------------\n\nContext\n\nMost of the modern websites use images in some form or the other in their content. For example, e-\ncommerce websites commonly have pages showing a list of products with the products’ images.\n\nWhenever you navigate to a web page that has one or more images in it, the browser tries to load those\nimages. And loading an image may take time depending upon the size of the image and the network of the\nuser. So sometimes images can take a lot of time to load. And usually how browsers behave is that until\nthe image has loaded, the browser would have nothing to show.\nThis is generally considered a bad user-experience because the user does not know if something is\nexpected in that content area but as soon as the image loads, it suddenly appears. So it is considered a\ngood practice to show a placeholder until the image has loaded. Facebook takes this practice to another\nlevel by showing placeholder for the entire page until the content has loaded.\n\n\nGetting Started\n-----\n\n```javascript\nnpm i fancy-image-loader \n```\n\nor\n\n```javascript\nnpm install fancy-image-loader \n```\n\nUsage - Example 1\n-----\n\n```javascript\nimport React from 'react';\nimport {render} from 'react-dom';\nimport FancyImageLoader from 'fancy-image-loader';\n\nlet placeholder = () =\u003e {\n    return \u003cimg src=\"file/path/loading.gif\"/\u003e\n}\n\nlet error = () =\u003e {\n    return \u003cimg src=\"file/path/error.png\"/\u003e\n}\n\nlet imageItem = \"https://images.alphacoders.com/151/151291.jpg\";\n\nrender(\n  \u003cFancyImageLoader \n        src={item}\n        placeholder={placeholder}\n        error ={error}\n        class=\"img\"\n        alt = \"Awesome image dude\"\n        style = {{borderRadius : '9px'}}\n        height=\"200px\"\n        width=\"300px\"\u003e\u003c/FancyImageLoader\u003e\n, document.getElementById('root'));\n\n```\n\nUsage - Example 2 (HTML Placeholer)\n-----\n\n```javascript\nimport React from 'react';\nimport {render} from 'react-dom';\nimport FancyImageLoader from 'fancy-image-loader';\n\nlet itemHtmlStyle = {\n    display: \"flex\",\n    justifyContent: \"center\",\n    height: \"100%\",\n    alignItems: \"center\",\n    textAlign: \"center\",\n    background: \"azure\"\n}\n\nlet placeholder = function () {\n    return  \u003cimg src=\"http://www.tbaf.org.tw/event/2016safe/imgs/loader1.gif\" style={itemStyle}/\u003e;\n}\n\nlet placeholderHtml = function () {\nreturn \u003cdiv style={itemHtmlStyle}\u003e\n            Loading image please wait\n        \u003c/div\u003e  \n}\n\nlet errorHtml = function () {\nreturn \u003cdiv style={itemHtmlStyle}\u003e\n            Sorry image failed\n        \u003c/div\u003e  \n}\n\nlet imageItem = \"https://images.alphacoders.com/151/151291.jpg\";\n\nrender(\n  \u003cFancyImageLoader \n        src={item}\n        placeholder={placeholderHtml}\n        error ={errorHtml}\n        class=\"fancy-image\"\n        alt = \"Awesome image dude\"\n        style = {{borderRadius : '9px'}}\u003e\u003c/FancyImageLoader\u003e\n, document.getElementById('root'));\n\n```\n\n\nProps\n-----\n\nName          | Required | Type     | Description |\n--------------|----------|----------|--------------\n`src`         | Yes      | string   | Source path of the image to be loaded + displayed   \n`placeholder` | Yes      | function | A Placeholder function which returns simple react element html/image to be dispayed before image loads/loading\n`error`       | No       | function | An optional error function which returns simple HTML/image to be displayed when image failed to load. If error doesn't provided then placeholder will stay in place.\n`class`       | No       | string   | css class property for the image element\n`width`       | No       | string   | An optioal width attribute string 100px, 200px etc\n`height`      | No       | string   | Height attribute string 100px, 200px etc\n`alt`         | No       | string   | Alternative text content\n`style`       | No       | object   | Style object containing css stuff for the `image` component.\n`border`      | No       | string   | Standered border styling - 0px solid etc.\n\n\n\n\n## Author\nKrishcdbry (krishcdbry@gmail.com)\n\n## Demo\nClick here (https://krishcdbry.github.io/fancy-image-loader/demo/)\n\n## Licence\nMIT @[krishcdbry](krishcdbry.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrishcdbry%2Ffancy-image-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrishcdbry%2Ffancy-image-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrishcdbry%2Ffancy-image-loader/lists"}