SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast RSBomber's Avatar
    Join Date
    Oct 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I force load JS before the page loads?

    Is there a way to load the following script BEFORE the full page loads? There is a hang-time because we are firing off other scripts that are preventing the page from fully loading... as soon as the other scripts get fired off, the page loads and the following script then completes loading. I'd like to force the following script to load before the page finishs loading to avoid the hang-up. Can the (window.onload) function be changed? Any ideas?

    Here's the script in question...

    Code:
    <script type="text/javascript">
    	
    	var slideshow_width='556px' //SET IMAGE WIDTH
    	var slideshow_height='240px' //SET IMAGE HEIGHT
    	var pause=8000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
    	
    	var fadeimages=new Array()
    	//SET: "IMAGE PATH", "IMAGE LINK", "IMAGE MAP" (link and map are optional)
    	fadeimages[0]=["/image-1.jpg", "", "#map-1"] 
    	fadeimages[1]=["/image-2.jpg", "", "#map-2"]
    	
    	////////////////////////////////////////////////////////////////////////////////////////////////////
    	// NO NEED TO MESS WITH ANYTHING BELOW THIS LINE - EXCEPT THE "NOSCRIPT" AND "MAPS" AT THE BOTTOM //
    	////////////////////////////////////////////////////////////////////////////////////////////////////
    	
    	var preloadedimages=new Array()
    	for (p=0;p<fadeimages.length;p++){
    	preloadedimages[p]=new Image()
    	preloadedimages[p].src=fadeimages[p][0]
    	}
    	
    	var ie4=document.all
    	var dom=document.getElementById
    	
    	if (ie4||dom)
    	document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
    	else
    	document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')
    	
    	var curpos=10
    	var degree=10
    	var curcanvas="canvas0"
    	var curimageindex=0
    	var nextimageindex=1
    	
    	function fadepic(){
    	if (curpos<100){
    	curpos+=10
    	if (tempobj.filters)
    	tempobj.filters.alpha.opacity=curpos
    	else if (tempobj.style.MozOpacity)
    	tempobj.style.MozOpacity=curpos/101
    	}
    	else{
    	clearInterval(dropslide)
    	nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    	tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    	tempobj.innerHTML=insertimage(nextimageindex)
    	nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
    	var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    	tempobj2.style.visibility="hidden"
    	setTimeout("rotateimage()",pause)
    	}
    	}
    	
    	function insertimage(i){
    	var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'">' : ""
    	tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0" usemap="'+fadeimages[i][2]+'">'
    	tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
    	return tempcontainer
    	}
    	
    	function rotateimage(){
    	if (ie4||dom){
    	resetit(curcanvas)
    	var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    	crossobj.style.zIndex++
    	tempobj.style.visibility="visible"
    	var temp='setInterval("fadepic()",50)'
    	dropslide=eval(temp)
    	curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    	}
    	else
    	document.images.defaultslide.src=fadeimages[curimageindex][0]
    	curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
    	}
    	
    	function resetit(what){
    	curpos=10
    	var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    	if (crossobj.filters)
    	crossobj.filters.alpha.opacity=curpos
    	else if (crossobj.style.MozOpacity)
    	crossobj.style.MozOpacity=curpos/101
    	}
    	
    	function startit(){
    	var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    	crossobj.innerHTML=insertimage(curimageindex)
    	rotateimage()
    	}
    	
    	if (ie4||dom)
    	window.onload=startit
    	else
    	setInterval("rotateimage()",pause)
    	
    </script>	
    <noscript>
    	<!-- DEFAULT IMAGE IF USER DOES NOT HAVE JS ENABLED - BE SURE TO USE THE CORRECT IMAGE MAP -->
    	<img src="/image-1.jpg" alt="" border="0" usemap="#map-1" />
    </noscript>
    Thanks for any help you might be able to provide.

  2. #2
    d^_^b Iain G's Avatar
    Join Date
    Nov 2005
    Location
    Gloucester, UK
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://dean.edwards.name/weblog/2005/09/busted/

    Dean Edwards wrote up this solution for IE and Mozilla.


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
  •