SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why two tags menu together cause loading slow?

    I want use two jquery tags menu in one page.
    I tested each one alone, even more than 10 pages, they all loading correctly. When I open the page, then can stay in the div position they should stay.
    But when I conbain them together, there will be caused that when I open the page, the pictures will drop down untill all the pictures have been loaded. Then they come back to the position where they should stay.
    Forgive my poor english, I don't know whether I describe clearly or no?this is the code:
    HTML Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
    <script src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script>
    <script src="http://alexagould.com/wp-content/plugins/nggGalleryview/jquery.timers-1.1.2.js?ver=1.1.2"></script>
    <script type="text/javascript"> 
    jQuery(document).ready(function(){
    jQuery('#slider1').galleryView({
    panel_width: 500,
    panel_height: 300,
    frame_width: 0,
    frame_height: 0
    });
    });
    </script>
    <script type="text/javascript"> 
    <!--
    jQuery(document).ready(function() {
     
    	jQuery('.slidermenu a').mouseover(function(){
    		switch_tabs(jQuery(this));
    	});
     	
    	jQuery('.slidermenu a').mouseout(function(){
    		switch_tabs(jQuery('.defaulttab'));
    	});
    	
    	switch_tabs(jQuery('.defaulttab'));
     
    });
     
    function switch_tabs(obj)
    {
    	jQuery('.tab-content').hide();
    	jQuery('.slidermenu a').removeClass("selected");
    	var id = obj.attr("rel");
     
    	jQuery('#'+id).show();
    	obj.addClass("selected");
    }
    //-->
    </script>
    <script type="text/javascript">
    /*
    EASY TABS 1.2 Produced and Copyright by Koller Juergen
    www.kollermedia.at | www.austria-media.at
    Need Help? http:/www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange
    You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you.
    */
    
    //EASY TABS 1.2 - MENU SETTINGS
    //Set the id names of your tablink (without a number at the end)
    var tablink_idname = new Array("tablink")
    //Set the id name of your tabcontentarea (without a number at the end)
    var tabcontent_idname = new Array("tabcontent") 
    //Set the number of your tabs
    var tabcount = new Array("3")
    //Set the Tab wich should load at start (In this Example:Tab 2 visible on load)
    var loadtabs = new Array("1")  
    //Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)
    var autochangemenu = 0;
    //the speed in seconds when the tabs should change
    var changespeed = 2;
    //should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
    var stoponhover = 0;
    //END MENU SETTINGS
    
    /*Swich EasyTabs Functions - no need to edit something here*/
    function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0))  {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}
    
    window.onload=function(){
    var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]);  a++; b++;}while (b<=menucount);
    if (autochangemenu!=0){start_autochange();}
    }
    </script>
    
    <div style="width:100%;height:300px;">
    <div style="float:left;width:100px;">
    <ul>
    <li><a href="" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" id="tablink1">A</a></li><li><a href="" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" id="tablink2">B</a></li><li><a href="" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" id="tablink3">C</a></li></ul>
    </div>
    <div style="float:left; width:500px;">
    <div class="tab-content" id="tabs1">
    <div id="slider1" class="galleryview">
    <div class="panel" id="tabcontent1"><img width="500px" height="300px"  src="http://www.freewindowswallpaper.com/images/large/00020.jpg"/><div class="panel-overlay"></div></div><div class="panel" id="tabcontent2"><img width="500px" height="300px"  src="http://www.freewindowswallpaper.com/images/large/00021.jpg"/><div class="panel-overlay"></div></div><div class="panel" id="tabcontent3"><img width="500px" height="300px"  src="http://www.freewindowswallpaper.com/images/large/00022.jpg"/><div class="panel-overlay"></div></div></div>
    </div>
    <div class="tab-content" id="tabs2">
    <img width="500px" height="300px;"  src="http://www.freewindowswallpaper.com/images/large/00023.jpg"/></div>
    <div class="tab-content" id="tabs3">
    <img width="500px" height="300px;"  src="http://www.freewindowswallpaper.com/images/large/00024.jpg"/></div>
    <div class="tab-content" id="tabs4">
    <img width="500px" height="300px;"  src="http://www.freewindowswallpaper.com/images/large/00025.jpg"/></div>
    </div>
    <div style="float:left;width:100px;">
    <ul class="slidermenu">
    <li style="display:none;"><a href="" class="defaulttab" rel="tabs1"></a></li>
    
    <li><a href="" rel="tabs2">11</a></li><li><a href="" rel="tabs3">22</a></li><li><a href="" rel="tabs4">33</a></li></ul>
    </div>
    </div>
    </div>
    <div style="float:left">
    Lecture halls are for meetings and lectures and often also display objects of worship. Lecture halls are called kodo. <br />
    The pagoda, a structure that has evolved from the Indian stupa, usually comes with three (sanju no to) or five (goju no to) stories. Pagodas store remains of the Buddha such as a tooth, usually in form of a representation. <br />
    Gates mark the entrance to the temple grounds. There is usually one main gate, and possibly several additional gates, along the temple's main approach. <br />
    </div>
    How to slove? Thanks.

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello, is there anyone can help me?
    Why loading these two js effect, casuse loading page slowly?
    The problem is EASY TABS 1.2, I have moved it before <body> tag, but it also loading slowly. When I open the page, all the photos make a long line first, then almost wait one second, they back the position where they should stay.
    How to slove? Thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •