search

gitbrent / bootstrap4-toggle

Bootstrap 4 Switch Button / Toggle
https://gitbrent.github.io/bootstrap4-toggle/
MIT License
213 stars 67 forks source link

slow #42

Open ghost opened 4 years ago

ghost commented 4 years ago

I am interested in using this library on a page with a list of 200 countries that I want to toggle on and off. The list is long and when the page loads the list appears to have regular check boxes for about 1 second and then your styled toggles appear. Is that expected? Are there any tweaks you would suggest to speed up the load time?

Kholodny commented 4 years ago

can you send example?

sml1990 commented 4 years ago

I'm having the same experience. Event with 18 toggles, the plain checkbox with no styling is rendered first and then the toggle styling is applied after about a split second. This is a visible and abrupt change from plain checkbox to styled toggle. This is happening on the latest versions of Chrome, Edge (Chromium version), Brave, and Opera at time of writing and my machine is a Ryzen5 six-core with 16GB of RAM running W10. Same issue on my Android phone which is a Pixel running the latest version of Android. It is also happening on this page for me: https://gitbrent.github.io/bootstrap4-toggle/

sml1990 commented 4 years ago

After some fiddling about I think the issue is that bootstrap4-toggle.js relies on jQuery to load first before it's able to run and apply the styling to the checkboxes. Any way we can maybe get a vanilla JS file instead of jQuery? Normally I'm a big proponent of jQuery, but the load time seems to be slowing down all of the critical styling functions in bootstrap4-toggle.js.

sml1990 commented 4 years ago

Any update on this from anyone?

jonmnoj commented 4 years ago

@sml1990 Other distributions linked on the main page note that they do not require jQuery, perhaps this one https://github.com/gitbrent/bootstrap-switch-button using ES6 would be what you are after instead?

cwolcott commented 3 years ago

I am having the same issue. I only have 1 toggle button defined. I have tried both bootstrap4-toggle and boostrap-switch-button

When load the page the checkbox is shown before showing the toggle/switch button.

https://user-images.githubusercontent.com/3777526/104830472-7eeb2d80-584d-11eb-96c3-e9eea6010b94.mov

I agree with @sml1990 and also see it when looking at the page https://gitbrent.github.io/bootstrap4-toggle/. You can see it flash for 10 ms.

Any thoughts?