Advanced Search

Results 1 to 6 of 6

Thread: Can images be loaded after script runs? ( Tab Content Script (v 2.2) )

  1. #1
    Join Date
    Dec 2007
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Can images be loaded after script runs? ( Tab Content Script (v 2.2) )

    1) Script Title: Tab Content Script (v 2.2)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

    3) Describe problem:

    I love this script, it does everything I want perfectly.

    My only issue is this: One of my tabs has about 50 photos in it, so the page hangs (displaying all content just up to the script then not displaying anything else) until the 50 photos are finished loading, then it all appears.

    Im wondering if the script can be set to execute and then have the photos fill in at the same time, that way people can use the tabs while the images are loading? I know with jquery this is possible, so just wondering if there was an easy band aid or work around to this problem?

    Thanks!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    change this function to

    Code:
    	expandtab:function(tabref){
    		var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
    		//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
    		var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
    		this.expandsubcontent(subcontentid)
    		this.expandrevcontent(associatedrevids)
    		for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
    			this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
    		}
    		if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
    			ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
    		this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
    	},
    
    	expandsubcontent:function(subcontentid){
    	for (var nu,i=0; i<this.subcontentids.length; i++){
    			var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
    			subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
             if (subcontent.id==subcontentid){
              nu=i;
             }
     	}
     if (this.images&&this.images[nu]){
       var obj=document.getElementById(this.subcontentids[nu]);
       var imgs=document.getElementsByTagName('IMG');
       for (var z0=0;z0<this.images[nu].length;z0++){
        if (imgs[z0]){
         imgs[z0].src=this.images[nu][z0];
        }
       this.images[nu]=null;
      }
     }
    
    example HTML

    Code:
    <ul id="countrytabs" class="shadetabs">
    <li><a href="#" rel="country1" class="selected">Tab 1</a></li>
    <li><a href="#" rel="country2">Tab 2</a></li>
    <li><a href="#" rel="country3">Tab 3</a></li>
    <li><a href="#" rel="country4">Tab 4</a></li>
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
    </ul>
    
    <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
    
    <div id="country1" class="tabcontent">
    Tab content 1 here<br />Tab content 1 here<br />
    </div>
    
    <div id="country2" class="tabcontent">
    Tab content 2 here<br />Tab content 2 here<br />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" />
    </div>
    
    <div id="country3" class="tabcontent">
    Tab content 3 here<br />Tab content 3 here<br />
    
    </div>
    
    <div id="country4" class="tabcontent">
    Tab content 4 here<br />Tab content 4 here<br />
    </div>
    
    </div>
    initialisation

    Code:
    var countries=new ddtabcontent("countrytabs")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    // a new array
    countries.images=[];
    // swap the scr of image 0 in the scond tab
    countries.images[1]=['http://www.vicsjavascripts.org.uk/StdImages/One.gif'];
    countries.init()
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Dec 2007
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks, but with your method it seems like I have to predefine all the images ahead of time? I have like 50-100 images in a tab, so its quite a few to pre-define, is there any other workaround to automatically tell the script to just load the content of the tabs after the entire page loads?

    That way the page loading isnt held up for the tab script to complete its load?

    thanks!!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    Well, you have to list the images one way or another unless you use server side code to retrieve them from -say, a folder. Or use a naming convention with a numeric component in conjunction with a known quantity and use javascript to retrieve them.

    You can use:

    http://www.dynamicdrive.com/dynamici...tent/index.htm

    That way, if the content is an external page, it should arrive after page load (not until the tab is activated in fact). But the images would have to be listed on that external page.
    Last edited by jscheuer1; 10-29-2010 at 06:03 AM. Reason: add details
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2007
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Well, you have to list the images one way or another unless you use server side code to retrieve them from -say, a folder. Or use a naming convention with a numeric component in conjunction with a known quantity and use javascript to retrieve them.

    You can use:

    http://www.dynamicdrive.com/dynamici...tent/index.htm

    That way, if the content is an external page, it should arrive after page load (not until the tab is activated in fact). But the images would have to be listed on that external page.
    I have all the images listed inside the actual <div> of the tabcontent, problem is that its holding up the entire page load (including the tabbed script itself) until all those images load up, I know there is usually some way to tell the script to load itself independantly from the content of the rest of the page (allowing the content below the tab script to load up and display while the browser works on downloading the tab script content, hence the tabs themselves). I hope that makes sense?

    For example if I just have a plain jane html file right now with a bunch of <img> tags, internet explorer will display the page instantly and then fill in the images as they load up (it doesnt display a blank until all the images load up and then display it all in one big blah), but the reverse is happening with the script, because I believe the script it holding up the entire page load until the script is complete (ie. its done downloading all its images/content) and then letting the rest of the page go forward.

    So its not necessarily coming up with a fancy JS way to load images after the fact, just allowing the page to load normally while this script works itself out on the side... ?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    To the side, no I don't think so. Let's try this - move the (from Step 2 on the demo page, or your equivalent of it):

    Code:
    <script type="text/javascript">
    
    var countries=new ddtabcontent("countrytabs")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    
    </script>
    Take that away from wherever you currently have it and place it as the last thing before the closing </body> tag.

    That way the images will load at least in the normal flow of the page, perhaps even as the last thing in the loading of the page, perhaps not even until required.

    However, using (as I suggested) the AJAX version of the script should guarantee that the images are not loaded unless or until required. This may be the best outcome. The differences in use of the two scripts aren't that great either. Converting shouldn't be all that difficult.

    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •