Skip to content
Replace missing (inline) images with a placeholder.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitattributes
.gitignore
LICENSE
README.md
gulpfile.js
index.html
package.json
prerequisites.json

README.md

imagefallback.js: Replace missing images.

Replace missing (inline) images with a placeholder.

Try the demo.

How to include the script

This include can be added to the header or placed inline before the script is invoked.

<script src="./js/imagefallback.js"></script>

How to start the script

<div style="background-image:url('this_image_is_intentionally_missing.jpg')"></div>
<img alt="" src="this_image_is_intentionally_missing.jpg">
var imageFallback = new ImageFallback({
	'active': (localStorage.getItem('ImageFallback')=='on'),
	'images': 'img',
	'backgrounds': '[style*="background-image"]',
	'url': './img/fallback.jpg' //'https://picsum.photos/800/600'
});

'active' : {Boolean} - Optionally only run when a condition is met (e.g. a keyword is present in localstorage).

'images' : {CSS rule} - Rule that describes affected images.

'background' : {CSS rule} - Rule that describes affected backgrounds.

'url' : {string} - Path to a placeholder image or service.

How to activate the script

Allow or disallow the image fallbacks by adding ?imagefallback=on or ?imagefallback=off to the end of your url. This makes it harder for the functionality to be accidentally pushed to a production server.

How to build the script

This project uses node.js from http://nodejs.org/

This project uses gulp.js from http://gulpjs.com/

The following commands are available for development:

  • npm install - Installs the prerequisites.
  • gulp import - Re-imports libraries from supporting projects to ./src/libs/ if available under the same folder tree.
  • gulp dev - Builds the project for development purposes.
  • gulp dist - Builds the project for deployment purposes.
  • gulp watch - Continuously recompiles updated files during development sessions.
  • gulp serve - Serves the project on a temporary web server at http://localhost:8500/.
  • gulp php - Serves the project on a temporary php server at http://localhost:8500/.

License

This work is licensed under a Creative Commons Attribution 3.0 Unported License. The latest version of this and other scripts by the same author can be found at http://www.woollymittens.nl/

You can’t perform that action at this time.