Canvas Support

Difference between ways of JS inclusion

5 replies · opened Dec 3, 2020

GgorkemdurDec 3, 2020

Hi,

What is the difference between including JS plugin files one by one and AJAX Lazy Loading.
Which is better in performance?

  • Individual JS Plugins
    If you care about performance, you must definitely consider using this method. Instead of loading all the Plugins using the plugins.min.js File, you can consider adding individual JS Plugin Files to the Page, like the plugins.toggles.js File. This way you can control what JS Plugins are loaded on your Page.

  • AJAX Lazy Loading
    This method is for the Performance Buffs and Beginner Users alike. It does not require any js/plugins.*.js File on the Page. If you choose to use this method, the js/functions.js File will intelligently do all the work for you and load only those JS Plugins on the Page which are required based on the JS Elements available on the Page.

Suppose, if your FAQs Page has the Toggle Element, then the plugins.toggles.js JS Plugin will be loaded automatically on the FAQs Page but not on other pages where the Toggles Element does not exist.

This way your Website remains light and fast.

SSemicolon WebSTAFFDec 4, 2020

Hello,

We would say that the AJAX Lazy Loading JS is much better for performance and also it needs less management on your Part as there would be no setup requirements in terms of adding Individual JS Files to different pages according to the Elements in them. Because, if you have a Page which does not have any 3rd Party Plugins, then no JS Files will be loaded. So yes, AJAX Lazy Loading is much better performance-wise.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

GgorkemdurDec 9, 2020

Hi,

While using the Lazy Loading option, do I need to include components JS files (e.g. BS-Select component: js/components/bs-select.js) separately? If yes, do I need to include them before or after functions.js.

PS: I was including them sparately after functions.js file and in one of my pages, I got the following error for the BS-Select component:

bs-select.js:8 There was an issue retrieving Bootstrap's version. Ensure Bootstrap is being loaded before bootstrap-select and there is no namespace collision. If loading Bootstrap asynchronously, the version may need to be manually specified via $.fn.selectpicker.Constructor.BootstrapVersion. TypeError: Cannot read property 'Constructor' of undefined
at S.fn.init.Z [as selectpicker] (bs-select.js:8)
at LoadLocCities (arama-sonucu.js:8)
at HTMLDocument.<anonymous> (arama-sonucu.js:381)
at e (jquery.js:2)
at t (jquery.js:2)

SSemicolon WebSTAFFDec 10, 2020

Hello,

You will need to include the Component JS Files before the js/functions.js File. Since the Bootstrap JS is loaded asynchronously, this Message is displayed as the Bootstrap Select JS is loaded before the Bootstrap JS and thus is not able to retrieve the Bootstrap Version. Meanwhile, this is simply a Warning and not an Error, so the Plugin will continue to work perfectly.

However, if you would like to hide the Warning Message, simply add the following code before the Component JS Files:
[ch_pre][/ch_pre]

This will work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

GgorkemdurDec 11, 2020

OK, I will include component JS files before functions files.

Although it is a warning messgage, I do some JS processes including the bs-select component (or some other components/plugins in other pages). Then, it causes improper behavior as the component is note ready at the moment.

Is there any component/plugin ready event related to this component and other components/plugins?

Thanks.

SSemicolon WebSTAFFDec 11, 2020

Hello,

Unfortunately, there is no event, related to this component. However, you can consider executing your Function on the pluginBootstrapReady Event by simply attaching this event on the Window. Example:

jQuery(window).on( 'pluginBootstrapReady', function( event ){
	// your functions
});

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard