Echo, simple JavaScript image lazy-loading, no jQuery! Super fast and easy.
<imgsrc="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">Check out a demo of Echo.
To install Echo into your project using Bower, use the GitHub repository hook:
bower install https://github.com/toddmotto/echo.git Drop your files into your required folders, make sure you're using the file(s) from the dist folder, which is the compiled production-ready code. Ensure you place the script before the closing </body> tag so the DOM tree is populated when the script runs.
<body><!-- html content above --><scriptsrc="dist/echo.js"></script></body>Echo config is super-simple, just add the image that needs to load when visible in a data-echo attribute:
<imgsrc="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">Project files and folder structure.
├── dist/ │ ├── echo.js │ └── echo.min.js ├── src/ │ └── echo.js ├── .editorconfig ├── .gitignore ├── .jshintrc ├── .travis.yml ├── Gruntfile.js └── package.json MIT license