Lazy Loading Select Box Icons


Topic: Lazy Loading Select Box Icons

williamw pro premium priority asked 3 years ago

On this help page: https://mdbootstrap.com/docs/standard/forms/select/

It says how you can have custom images as data-mdb-icon 's in each option field.

<select class="select">
  <option value="1" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.jpg" >One</option>
</select>

I would like to lazy load theses images as there are very many in the select options and it slows down page load times.

Would something like loading="lazy" work, or could this be done with an ajax / json call?

I have tried using loading="lazy" but this doesn't work.

Thanks! William


Grzegorz Bujański staff answered 3 years ago

Unfortunately, there is no such option in select. I will add this to our list of ideas, and maybe one day we will add an option. At the moment, what I can suggest is to generate an empty select after page load and update it after getting the API data. I prepared a snippet that simulates how this can be done: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3290738#html-tab-view


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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Custom Build
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes