Topic: Lazy Loading Select Box Icons
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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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