Hi,

Thank you so much for your quick response,

Please note that, we had downloaded these references into JS files, and include these files as a local reference in project, how we use those local references into loader like as your suggested example? We need to download only required resources rather all JS files for fast UI rendering. Local downloaded files are attached. Please prepare a sample application, its very helpful for us.

Thanks,

Sufyan

Hello Abu,

Please find the attached modified sample that benefits from the igLoader with a file name Chart_mod.html. You can see that the size of the loaded resources is less, so I believe this should improve the performance of your app. I have also included your original sample so that you can compare.

Please note:

1) Both samples load resources from the CDN, so that you can easily check the size of the resources via the browser developer tools and it will be more close to real life scenario when users browses will also need to download those resources and will not load them from the local machine.

2) The modified sample load all resources for the igDataChart by using a mask:

            resources:  "igDataChart.*," + // line 427

however you can further diminish the size of the loaded resources by loading aonly those resources for the igDataChart that you use in your app:

            resources: 'igDataChart.RangeCategory.Scatter'+  // line 427

3) I have commented line 625, because I got error. I think you will be able to fix it.

I hope this meets your requirements. Please let me know if you have further questions on the matter.

Hi,

Thank you for your feedback ! I have noticed this issues and will update the sample accordingly. Will be able to do this today and when done I will update this thread.

Any update?

Hi Abu,

I am sorry for late response. As I said you can further diminish the amount of downloaded resources by specifying only the features you need. In your case this will look like this:

        $.ig.loader({
            scriptPath: "http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/",
            cssPath: "http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/",
            resources:  "igDataChart.Category.Financial.Annotation," +
                        "igniteui-angular"    
        });

However the DOMLoaded time and time spent for the page loading as a whole will still be higher, and this is due to those reasons:

1) igLoader makes a request for each css and js file that needs to be loaded. The more features the widget has, the more requests made.

2) Browsers work in a way that they wait one js file to be loaded before loading next one. Also, no more than 2 requests at the same domain are allowed simultaneously.

As you see this will decrease loading time. First a request is made for the base igDataChart widget and once it is loaded a new request will be made for the file with categoryChart, then comes the FinancialChart and so on.

What you can do to diminish the delay time in your sample app is to move the <Script> tag with all your code above the <div class="container-fluid">. Please let me know if you have further questions on the matter.