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/



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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
Tags