PDA

View Full Version : Problem with Preloader (with Progress Bar) II



emanon23
11-16-2008, 07:58 PM
1) Script Title:
Preloader (with Progress Bar) II
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/preloadimage2.htm
3) Describe problem:
Since my page is quite image heavy in quantity, I've wanted to include
a preloader script to the homepage to avoid the gradual loading of the page.
However whatever I do I cannot seem to get the darn thing to work.
I've tried removing different other scripts on the page as well as altering the progressbar.js file
with different z-values as well altering my BODY tag to include "onload" extensions but its
still doesn't want to work.
I'm all self-taught and would appreciate every help with this.
My page is www.nicolasdoldinger.com

The .js file is www.nicolasdoldinger.com/progressbar.js

Thank you in advance for your time,

Nicolas

jscheuer1
11-16-2008, 08:38 PM
First of all the script appears to not be working in Opera, that's even on the demo page. But on your page in all browsers, there appears to be an onload conflict. Remove the onload event from the body tag and place this script right before the closing </body> tag:


<script type="text/javascript">
if(typeof window.addEventListener!='undefined')
window.addEventListener('load', loadimages, false);
else if(typeof window.attachEvent!='undefined')
window.attachEvent('onload', loadimages);
else{
if(window.onload!=null){
var oldOnload=window.onload;
window.onload=function(e){
oldOnload(e);
loadimages();
};}
else
window.onload=loadimages;
}
</script>

emanon23
11-17-2008, 12:35 AM
Wow Thank you John!
I've been reading a lot of your replies and have tried different methods but I haven't tried this one.
however, now it's showing the progress bar but it's still showing the whole page in the background
while it's loading. it there a way of making it plain white until all the images are loaded?
check it out:
www.nicolasdoldinger.com
thank you again for help!

Nicolas

jscheuer1
11-17-2008, 03:38 AM
OK, let's take a different approach. Get rid of what we had before (what we just added) and get rid of any and all other onload events for loadimages (if any still remain from before). Use this version of the script:


if(document.getElementById)
;(function(){
// Progressbar - Version 3.0
// Author: Brian Gosselin of http://scriptasylum.com
// Featured on Dynamic Drive (http://www.dynamicdrive.com)
// PUT THE NAMES OF ALL YOUR IMAGES THAT NEED TO BE "CACHED" IN THE "imagenames" ARRAY.
// DONT FORGET THE COMMA BETWEEN EACH ENTRY, OR THE TICK MARKS AROUND EACH NAME.
// WHEN ALL IMAGES ARE LOADED, THE "progressbar_body_container" (if used) DIVISION'S DISPLAY STYLE IS SET TO BLOCK

var imagenames=new Array( '1.gif' , '2.gif' , '3.gif' , '4.gif' , '5.gif' , '6.gif');

var yposition=250; // POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='gray' ; // PROGRESS BAR COLOR
var unloadedcolor='white'; // BGCOLOR OF UNLOADED AREA
var barheight=35; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=350; // WIDTH OF THE BAR IN PIXELS
var bordercolor='black'; // COLOR OF THE BORDER
var usecontainer=true; // ARE YOU USING THE "progressbar_body_container" TO OBSCURE YOUR MARKUP WHILE IMAGES LOAD? (true/false)


//DO NOT EDIT BEYOND THIS POINT

var blocksize = barwidth/imagenames.length;
barheight = Math.max(barheight, 25);
var loaded = 0, perouter, perdone, images=[];
if(usecontainer)
document.write('<style type="text/css">#progressbar_body_container {display:none;}<\/style>');
var txt='<div id="perouter" style="position:absolute; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
txt+='<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
txt+='</div>';
txt+='</td></tr></table>';
txt+='</div>';
document.write(txt);

var loadimages = function(){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
clipdiv(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for (var n = imagenames.length - 1; n > -1; --n){
images[n] = new Image();
images[n].onload = dispbars;
images[n].src = imagenames[n];
}
}
var setouterpos = function(){
var ww = window.innerWidth? window.innerWidth : document.body.clientWidth;
var x = (ww-barwidth)/2;
perouter.style.left = x + 'px';
perouter.style.top = yposition + 'px';
}
var dispbars = function(){
clipdiv(perdone, 0, blocksize * (++loaded), barheight, 0);
if(loaded >= imagenames.length)
setTimeout(hideperouter, 800);
}
var hideperouter = function(){
perouter.style.display='none';
if(usecontainer)
document.getElementById('progressbar_body_container')?
document.getElementById('progressbar_body_container').style.display = 'block' :
setTimeout(hideperouter, 100);
}
var clipdiv = function(el, ct, cr, cb, cl){
el.style.clip='rect(' + [ct, cr, cb, cl].join('px ') + ')';
}
loadimages();
})();

Finally, in the body of your page add the progressbar_body_container division, putting all of the rest of your content in it:


<body>
<div id="progressbar_body_container">

your entire page's content goes here

</div>
</body>

emanon23
11-17-2008, 11:26 AM
NICE! That did the trick. the content is hidden till it's all loaded! Thank you!

However there still seems to be glitch in my gallery. It keeps skipping back to the beginning instead of just rolling forwards:

www.nicolasdoldinger.com

Any ideas on that?
I've tried removing the logo from my progress bar but that didn't really help.
You are a genius for understanding all of this code!
I feel like I'm just scraping on the surface ;)

N

jscheuer1
11-17-2008, 02:37 PM
A few things I noticed are that you have a Dynamic Drive terms of service (http://www.dynamicdrive.com/notice.htm) violation on your page and at least two scripts, one with its styles that you are not using. I doubt that any of this is intentional, but you should remove:


<link rel="stylesheet" type="text/css" href="gallerystyle.css" />

<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->

<script type="text/javascript" src="motiongallery.js">

/***********************************************
* CMotion Image Gallery- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/

</script>


<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.51): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>

and add the credit back to the Conveyor Belt Slide Show:


<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Specify the slider's width (in pixels)
var sliderwidth="675px"
//Specify the slider's height
var sliderheight="368px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=2
//configure background color:
slidebgcolor="#FFFFF"

//Specify the slider's images
var leftrightslide=new Array() . . .

Now as to the problem, Conveyor needs display for setup, so in the progressbar.js file change:


document.write('<style type="text/css">#progressbar_body_container {display:none;}<\/style>');

to:


document.write('<style type="text/css">#progressbar_body_container {visibility:hidden;}<\/style>');

and change:


document.getElementById('progressbar_body_container').style.display = 'block' :

to:


document.getElementById('progressbar_body_container').style.visibility = 'visible' :

emanon23
11-17-2008, 10:13 PM
Thank you so much, John! It works like a charm now!
I also added the credits again, which seemed to have disappeared in various
code-cutting missions. Finally I have one last question:

I'm looking for a preloader that would load all my links of my homepage in the background
so when the visitor clicks on them they are already cached in his/her browser.
I looked at quickserv as a solution (http://javaboutique.internet.com/quickserv/)
but since it's quite an old script and it doesn't really seem to work
I wondered if you know an alternative script for that kind of function.

Thank you again, your help is highly appreciated!
Best,

Nicolas

jscheuer1
11-18-2008, 05:12 AM
I don't know much about Java. I don't think there is any javascript approach to this other than to preload images, css, and scripts. But preloading isn't as great a thing as one might imagine. It's all going to take some time, however it is done (load ahead or load on demand). And if a user is on your first page and their browser starts to download a preload resource for another page, but doesn't complete it, and then proceeds to the page where it is required, this can actually make things take longer because the browser will first have to cancel the ongoing request and then initiate a new one for the same material starting all over again once it has switched to the next page. If you are preloading on each page, and not much ever gets completed, this will definitely slow things way down for the user. With images, preloading via javascript needs to be done each time, the fact that an image is cached will not speed things up as much as simply having the image (if it is already cached) on the page does.

In short, if this sort of thing were really all that feasible or desirable, there would be a plethora of schemes already available for it.

The current best practice is to split up your resources as much as possible among your various pages so that no one page will have to stand there loading and loading and loading, while at the same never repeatedly loading the same resource from different locations or in different forms. Also of concern is wasting time preloading code or other resources that might change by the time it's actually requested by the browser, or that the user may never actually navigate to in a given session.

With images as well as code, there are also a number of strategies for compression/optimization. Using only valid code helps too, as the browser won't have to waste time error correcting it.

One should also design a site from the beginning with an eye to keeping the pages as lightweight as possible.

Though it is billed as instructions for serving javascript fast, this page:

http://www.thinkvitamin.com/features/webapps/serving-javascript-fast

has a lot of information on speeding up a site in general.

emanon23
11-19-2008, 03:03 PM
Thank you John for clearing that up for me.
I've been lowering my image sizes and fine tuned the site by using the same sourcefiles in case they are repeated on different pages.
I think though the preloader on the homepage really works great at avoiding a slow painful built up of the site. I hope you agree.
All the Best,

Nicolas

p.s. u were kidding about not knowing java so well ,right?! ;-)

jscheuer1
11-19-2008, 03:34 PM
I wasn't kidding, though somewhat similar in syntax, Java and javascript are two different things. Java is a compiled language that requires a plug in for use in a given browser. Javascript is uncompiled, run by the browser's native javascript interpreter (if any). Most browsers have a native javascript interpreter. Java can access information about the browser's cache, while javascript can only ascertain this information as regards images. Java files are usually quite large and so have a fairly big upfront cost when first run, often including the first invocation of the plug in for that browser session. Javascript can be large or quite small and incurs no plug in start up costs.

It is one thing to preload images for an image heavy page, and quite another to attempt to preload all links to a page. Using the same yardstick employed in my previous post:


. . . if this sort of thing were really all that feasible or desirable, there would be a plethora of schemes already available for it.

There are tons of scripts for preloading images (with or without progress bars), and even more that incorporate image preloading into their architecture.

Though often more pleasing to the eye, preloading images takes at least as long as loading. So it's no excuse not to optimize one's images.

emanon23
11-20-2008, 03:07 PM
lol! being selftought i didn't even know there is a difference between Java and Java script.
Makes sense to me now though. Oh if only I could see through the code...
Looking at my page I've noticed another flaw:

I've tried to add a facebox ajax/html opening script to the conveyor belt slideshow,
but don't seem to be able to do it. Facebox works fine in my
phone contact button on the top right so I don't understand why it wouldn't work
in the conveyor belt. I also looked at the DD post about facebox
used in the carrousel script, but it doesn't seem to be as straight forward.

I know I'm probably pushing the limits of javascript with my page,
but it'd be great to know how to solve this issue.
What do you think?

I'm using facebox 1.2 I believe. Check it out:
www.nicolasdoldinger.com

Thank you for your time and patience.

jscheuer1
11-20-2008, 03:29 PM
That's an initialization problem. Facebox needs to see all the rel="facebox" items when it initializes, which is before Conveyor has added all of its markup to the page. If we are lucky, you can just remove:


<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>

and add:


$('a[rel*=facebox]').facebox()

to the end of the fillup function:


function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
$('a[rel*=facebox]').facebox()
}

emanon23
11-20-2008, 03:47 PM
Hmmm. now it's doing something really strange.
It seems to open a facebox box but then goes straight to the html page BUT only featuring the flash movie on it. No other content (e.g. descriptions etc.)
How did that happen?
Do I have to change anything inside the facebox.js file maybe?
it's located here www.nicolasdoldinger.com/facefiles/facebox.js
Thank you.

N

jscheuer1
11-20-2008, 04:19 PM
I said, if we were lucky, I haven't been doing much work with Facebox. I think this (and similar):


leftrightslide[0]='<a href="PLAYERHeinz.html" rel="facebox" ><img src="banner1.jpg" border=0></a>'

should be more like:


leftrightslide[0]='<a href="javascript:jQuery.facebox({ajax:\'PLAYERHeinz.html\'});" rel="facebox" ><img src="banner1.jpg" border=0></a>'

At least that way they would match the syntax of the one for the phone link.

Note: The single quotes inside the leftrightslide item string must be escaped (\') as shown above.

emanon23
11-20-2008, 05:15 PM
Hmmmm. it seems like we're getting closer.
Still doing a similar thing, but it does so also when I add that javascript:jquery link to a
normal picture. So now it has nothing to do with the conveyor belt script anymore, but with the content of my player site, I think. Any ideas on that?
I've compared the phone.html and PLAYERHeinz.html, but don't seem to seen much difference apart from the fact that there is some JS in the Player page.

Wonder if that causes interference with facebox...

jscheuer1
11-20-2008, 05:37 PM
AJAX will not load scripts from the external page, that's probably it.