Tabs load slow on page load

Yii 1.1 General Discussion
1

I have noticed that when a page containing a tab widget loads, the tab widget takes some time to load and I can see the underlining unordered for a second or two while the page loads. I also see the objects within the tab across the entire page and once the tabs load they appear in the right spots.

This happens quite frequently and it’s annoying. It usually happens when you navigate to a new page that contains the tab widget.

It’s not my code, I’m using the example code. I’ve seen the same issue in other yii apps by other developers.

It seems to be a yii issue or a jquery tab issue or something. I’ve seen the issue in both safari and firefox.

Is there any way to have the tab widget load faster and not see the underlining unordered list?

2

On a website with lots of jQuery UI components, I avoided this by:

Adding code into the main layout file as follows




<div id="loading" style="display:none;">

	<?= CHtml::image(Yii::app()->request->baseUrl . '/images/ajax-loader.gif'); ?>

</div>

<div id="content">

	<script type="text/javascript">

		$('#content').css({opacity: 0});

		loadTimer = setTimeout(function(){

			$('#loading').fadeIn("fast");

		}, 20);

	</script>


	Content here...


</div>

This ensures that the page loads for non-javascript users, but temporarily hides the content for those with javascript enabled. It also fades in a loading bar after a short delay, so the users see some progress if the page is taking a long time to load.

Then, at the end of the $(document).ready() code




	// Handle delayed loading of page content

	clearTimeout(loadTimer);

	$('#loading').fadeOut(function(){

		$('#content').fadeTo('fast', 1);

	});

This fades the page in once it’s ready to view. And prevents the loading image from displaying if it hasn’t already.

It works well for our scenario, but I can’t promise it works on older browsers. I’ve never seen any half built UI widgets when using this.

3

Thanks - this looks great! Will give it a shot.

I’m not sure where the $(document).ready() code goes. Any suggestions?

4

I have a separate javascript file with site related functions that is included with every page load. If you only need this feature, you could probably add the code at the bottom of your layout file, keeping it logically close to the javascript code which initially hides the page. You also would need to ensure jQuery was registered for every page.

Assuming jQuery is already registered:




<div id="loading" style="display:none;">

        <?= CHtml::image(Yii::app()->request->baseUrl . '/images/ajax-loader.gif'); ?>

</div>

<div id="content">

        <script type="text/javascript">

                $('#content').css({opacity: 0});

                loadTimer = setTimeout(function(){

                        $('#loading').fadeIn("fast");

                }, 20);

        </script>


        Content here...


</div>


<script type="text/javascript">

        $(document).ready(function(){

                // Handle delayed loading of page content

                clearTimeout(loadTimer);

                $('#loading').fadeOut(function(){

                    $('#content').fadeTo('fast', 1);

                });

        });

</script>

This is really only sensible if you want the functionality on each page. Otherwise you should probably just hide the individual widgets and use similar js code to show them in $(document).ready().

5

Thanks, works great!!