Topic: where is .lazy class defined?
vishal-2sigma priority asked 2 years ago
Expected behavior Expected to find the definition of lazy, data-mdb-lazy-src, etc.
Actual behavior Can't find .lazy or data-mdb-lazy-src references in the standard mdbootstrap download.
Resources (screenshots, code snippets etc.)
Michał Duszak staff answered 2 years ago
Vishal,
Happy New Year!
Lazy Loading is defined in the JavaScript. If you're working with a module bundler, than
import { LazyLoad } from 'mdb-ui-kit';
should work just fine.
If you wish to look at the script responsible for lazy loading and you've installed ui kit with npm, you can take a look at it in the node_modules folder at the directory of:
mdb-ui-kit/src/js/pro/lazy-load.js
To make debugging less troublesome, could you please tell me what unwanted behaviour are you experiencing? Are there any errors in the console?
vishal-2sigma priority answered 2 years ago
Michal,
Happy New Year!
Sorry about being less clear -- my question was that I don't see definitions of these selector / attributes in the .css files that I use for my MDBootstrap subscription and therefore, unable to troubleshoot why my code doesn't work.
Do I need to include additional .css or .js files on my pages for these to work?
Thank you.
-- Vishal
Michał Duszak staff answered 2 years ago
data-mdb-lazy-src
attribute value defines the source of an element, it takes a string, an url of your image
.lazy
is the selector by which the Lazy Load will do its job
For further reference visit the API Tab https://mdbootstrap.com/docs/standard/methods/lazy-loading/#docsTabsAPI
vishal-2sigma priority answered 2 years ago
For additional context ... this is to support Lazy Loading of images and videos as described here: https://mdbootstrap.com/docs/standard/methods/lazy-loading/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.1
- Device: Mac
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No