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.
Unfortunately, activation email could not send to your email. Please try again.

Slow loading of control styles

Thread ID:

Created:

Updated:

Platform:

Replies:

130825 Jun 5,2017 04:03 PM Jun 7,2017 08:37 AM ASP.NET Core 3
loading
Tags: Tab
Jair Piedrahita
Asked On June 5, 2017 04:03 PM

     Hello, 

I am using tab controls in my application, but at the time of excecution, the control styles are loading very slow and the application is having a bad apparience during that time. It happens in chrome and edge. 

How can I enhance the speed while loading the styles of syncfusion controls? 

Thanks 

Jair

Attachment: pantallazo_562f517b.zip

Keerthana Rajendran [Syncfusion]
Replied On June 6, 2017 02:00 AM

Hi Jair, 
 
Thank you for contacting Syncfusion support. 
 
   
We suggest you to set the display css property of your control wrapper as none at initial stage and change this css property to block in create event of tab .   
  
 
<div class="container" style="width: 500px ; display:none"> 
        <ej-tab id="closeTab" show-close-button="true" create="oncreate"> 
            <e-tab-items> 
                <e-tab-item id="eJS" text="Rome"> 
                    <e-content-template> 
                        <div>  
                            Rome is one of the world's most fascinating cities. The old adage that Rome was not built in a day — and that you won't see it in one or even in three — is true. For the intrepid traveler who can keep pace, here is a list of must-sees. But remember what the Romans say: "Even a lifetime isn't enough to see Rome."   
                        </div> 
                    </e-content-template> 
                </e-tab-item> 
                <e-tab-item id="winRT" text="Paris"> 
                    <e-content-template> 
                        <div> 
                            Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism that oozes from every one of its beautiful corners.You couldn't possibly visit Paris without seeing the Eiffel Tower. Even if you do not want to visit this world famous structure, you will see its top from all over Paris. The tower rises 300 meters tall (984 ft); when it was completed at the end of the nineteenth century. 
                        </div> 
                    </e-content-template> 
                </e-tab-item> 
                <e-tab-item id="orubase" text="London"> 
                    <e-content-template> 
                        <div> 
                            London is one of the most popular tourist destinations in the world for a reason. A cultural and historical hub, London has an excellent public transportation system that allows visitors to see all the fantastic sights without spending a ton of money on a rental car.London contains four World Heritage Sites: the Tower of London; Kew Gardens; the site comprising the Palace of Westminster, Westminster Abbey, and St Margaret's Church. 
                        </div> 
                    </e-content-template> 
                </e-tab-item> 
            </e-tab-items> 
         </ej-tab> 
    </div> 
<script> 
    function oncreate() { 
 
        $(".container").css("display", "block"); 
 
    } 
</script> 
 
We have prepared sample for your reference. Please refer to the below given link  
 
 
 
Regards, 
Keerthana 


Jair Piedrahita
Replied On June 6, 2017 09:13 AM

Thank you Kerthana, this will at least give the appearence the control is loading at once, however I would like to know a little more about this performance issues because is not the only control having this behaviour. Can you explain me a little more about this matter? 

Thanks and regards, 
Jair

Keerthana Rajendran [Syncfusion]
Replied On June 7, 2017 08:37 AM

Hi Jair, 
 
Since our controls are JavaScript based controls, there is a slight delay between control serialization and rendering using script. In this delay the serialized html element of the control in DOM are visible so we suggest to follow  the workaround in the previous update to make the control rendering even.The time taken for loading scripts and css increases the time taken for page load.In order to reduce this you can use CSG so that you can generate scripts only for the required controls and use that custom script in your application 
 
Regards, 
Keerthana.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;