We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

The menu loads very slow

Hi
I have made a c# web Api (

[{"Id":1,"ParentId":0,"Title":"Hem","Url":null,"Publish":"Ja","LineUp":10,"Kind":"start"} ...)

thats work fine (about 40 rows)

I have also made a client solution that works fine but it takes a long time until the page loads. I changed from ej.web.all.min.js to ej.menu.min.js, thats helped a little but its still a "flicker" (3-4 seconds) before the page shows correctly. Is there anything i can do? (It seems to be a litle bit faster with edge then chrome....) Br Mattias Sweden

<!DOCTYPE html> <html> <head> <title>Menu Test</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel='nofollow' href="Content/bootstrap.min.css" rel="stylesheet" /> <link rel='nofollow' href="Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" /> <link rel='nofollow' href="Content/ejthemes/responsive-css/ej.responsive.css" rel="stylesheet" /> </head> <body> <ul id="MainMenu"></ul> <div id="Content"></div> <!-- JavaScript Area --> <script src="Scripts/jquery-1.9.1.min.js"></script> <script src="Scripts/bootstrap.min.js"></script> <script src="Scripts/ej/ej.core.min.js"></script> <script src="Scripts/ej/ej.data.min.js"></script> <script src="Scripts/ej/ej.menu.min.js"></script> <script type="text/javascript"> $(document).ready(function () { function getPageContent(Id) { var PathApiPage = "api/Page/" + Id; $.ajax({ dataType: "json", url: PathApiPage, success: function (data) { $("#Content").html(data.TextBody); } }); } function getMenu(data) { jQuery(function ($) { $("#MainMenu").ejMenu({ isResponsive: true, showArrow: true, fields: { dataSource: data, id: "Id", parentId: "ParentId", text: "Title", }, click: function (args) { getPageContent(args.ID); } }); }); } $.ajax({ isResponsive: true, type: "GET", dataType: "json", url: "/api/menu", success: function (data) { getMenu(data); }, error: function () { alert("Error"); } }); }); </script> </body> </html>



1 Reply

KV Karthikeyan Viswanathan Syncfusion Team March 3, 2017 11:48 AM UTC

Hi Mattias, 
 
Thanks for contacting Syncfusion support. 
 
Yes. The best way to improve a speed by using RequireJS. Essential JavaScript includes RequireJS support for all of its components, which implements the AMD (Asynchronous Module Definition) specification. Its main goal is to load the user-specified multiple custom scripts/modules in a particular order – as one relies on the other. Also, it improves the speed and quality of the code.    
    
JS help documentation link: https://help.syncfusion.com/js/requirejs     
 
Regards, 
Karthikeyan V. 


Loader.
Up arrow icon