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

[darkus]

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!

[vwphillips]

change this function to

	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

<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

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()

[darkus]

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!!

[jscheuer1]

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.

[darkus]

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... ?

[jscheuer1]

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):

<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.