[GastForen Archiv Adobe GoLive ...loading

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Archiv - Archivierte Foren
Themen
Beiträge
Moderatoren
Letzter Beitrag

...loading

heinz weidenhueller
Beiträge gesamt: 73

25. Okt 2004, 07:08
Beitrag # 1 von 12
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Forum,

Wie überbrückt man Ladezeiten beim Seitenaufbau?
gibt es im html-Bereich eine Flash-vergleichbare Funktion, die verschwindet, wenn sich die Seite aufgebaut hat?

Nur falls es interessiert wo das Problem besteht:

http://www.themensites.de/derradladen

Wie immer vorab Dank für alle Tipps

Gruß Heinz Weidenhüller
X

...loading

randy
Beiträge gesamt: 436

25. Okt 2004, 08:16
Beitrag # 2 von 12
Beitrag ID: #118308
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
gibt es, man/frau blendet einen layer drüber und macht ein preloading aller bilder, wenn alles geladen ist, dann blendet man/frau diesen aus.

gruss randy
<adobe promotor>


als Antwort auf: [#118299]

...loading

heinz weidenhueller
Beiträge gesamt: 73

25. Okt 2004, 11:53
Beitrag # 3 von 12
Beitrag ID: #118378
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Randy,

das hört sich ja super an. Nur, welches Ereignis steht dafür, dass der Rahmen ausgeblendet werden kann.
Das Preloading der Bilder mache ich als Head-Aktion?

Entschuldige bitte, aber Du bist da um einiges mehr im Thema als ich.

Gruß Heinz


als Antwort auf: [#118299]

...loading

randy
Beiträge gesamt: 436

25. Okt 2004, 12:32
Beitrag # 4 von 12
Beitrag ID: #118393
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
werde dir heute oder morgen ein script zur verfügung stellen, wird aber einen ticken umfangreicher, okay?

gruss randy
<adobe promotor>


als Antwort auf: [#118299]

...loading

heinz weidenhueller
Beiträge gesamt: 73

25. Okt 2004, 13:01
Beitrag # 5 von 12
Beitrag ID: #118405
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Randy,

da bin ich ja mal gespannt.

Gruß Heinz


als Antwort auf: [#118299]

...loading

randy
Beiträge gesamt: 436

25. Okt 2004, 17:04
Beitrag # 6 von 12
Beitrag ID: #118499
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Okay hier das Script

var imagenames =new Array("001ani.jpg","002ani.jpg","003ani.jpg","004ani.jpg");
// Def ein Array mit den Bildern die geladen werden sollen

var yposition=250; //Pos Ladebalken von oben in Pix

var loadedcolor='#E89B29' ; // Farbe

var unloadedcolor='white'; // bgcolor

var barheight=15; // Höhe Progressbar in Px

var barwidth=250; // Breite in Pix

var bordercolor='black'; // Rahmenfarbe

var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;

var IE4 = (document.all)? true : false;

var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;

var imagesdone=false;

var blocksize=barwidth/(imagenames.length);
barheight=Math.max(barheight,25);

var loaded=0, perouter, perdone, images=new Array();

var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';

if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
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">PEPATO | GROUP...</font></center></td></tr></table>';

if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<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">PEPATO | GROUP...</font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';

document.write(txt);

function loadimages(){
if(NS4){
perouter=document.perouter;
perdone=document.perouter.document.layers[0].document.perdone;
}
if(NS6){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
}
if(IE4){
perouter=document.all.perouter;
perdone=document.all.perdone;
}
cliplayer(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
setTimeout('checkload('+n+')' ,n*100);
}
}
function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
perouter.style.left=x+'px';
perouter.style.top=yposition+'px';
perouter.style.visibility="visible";
}
}
function dispbars(){
loaded++;
cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
}
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
}
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
window.onload=loadimages;

Liegt bei mir in einer externen Datei, diese wird im Body der Seite
aufgerufen mit <script language="javascript" src="lib/anipreload.js"></script>

Schau es Dir erstmal an, danach kann ich Dir noch Fragen beantworten


gruss randy
<adobe promotor>


als Antwort auf: [#118299]

...loading

heinz weidenhueller
Beiträge gesamt: 73

25. Okt 2004, 18:06
Beitrag # 7 von 12
Beitrag ID: #118507
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Randy,

jetzt bin ich ja erst mal platt. Da hast Du Dir ja richtig Arbeit gemacht.

Gruß Heinz


als Antwort auf: [#118299]

...loading

heinz weidenhueller
Beiträge gesamt: 73

26. Okt 2004, 09:08
Beitrag # 8 von 12
Beitrag ID: #118591
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Randolph,

erst noch mal herzlichen Dank dafür, dass Du Dir solche Mühen machst.

Wie Du Dir ja gedacht hast, wirft das bei mir Fragen auf:

1.) um das Script zu referenzieren lege ich es lose in den Site Content Ordner: Unter dem Namen:
"anipreload.js" oder "lib/anipreload.js".

OK?

2.) Was muss ich innerhalb des Scripts auf meine Inhalte hin anpassen? Bleiben die Bezeichnungen: var imagenames =new Array("001ani.jpg","002ani.jpg","...)
oder ersetze ich sie durch meine eigenen Bildnamen?

Falls sie bleiben, muß ich sie erst basteln oder habe ich was übersehen?

3.) Erzeugt das Script den Ladebalken optisch selbst oder muß ich den händisch bauen?

4.) Den Preload der Bilder erledigt das Script nicht. Sehe ich das richtig? Was macht in Deinem Script: function loadimages(){...?

By the way: Wenn ich den Preload bereits im Framesetindex anschiebe, behält er die Bilder im Browsercache?

5.) Braucht die Ladebalken-Ebene den Namen "perouter" und muss ich die selbst anlegen? Falls ja, wieso stehen dann im Script so viele Parameter?

Gruß Heinz


als Antwort auf: [#118299]

...loading

randy
Beiträge gesamt: 436

26. Okt 2004, 09:57
Beitrag # 9 von 12
Beitrag ID: #118597
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
1.) ist okay
2.) schreibe die Dateinamen Deiner Bilder in das Array
3.) wird automatisch erzeugt, deshalb am Anfang yposition, loadedcolor etc
4.) function loadimages macht den preload, dh. noch ein Preload wird nicht benötigt
5.) wird automatisch erzeugt

gruss randy
<adobe promotor>


als Antwort auf: [#118299]

...loading

randy
Beiträge gesamt: 436

8. Nov 2004, 14:09
Beitrag # 10 von 12
Beitrag ID: #122309
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hallo heinz, habe das script noch einmal überarbeitet und bei mir funzt es jetzt.

anschauen kannst du es unter
http://www.pepato-group.com/test/001ani.jpg.htm

es macht jetzt das preloading mit orangenem balken (und pepato-group), kannst du aber ändern, die bilder sollten eine gewisse größe haben, oder relativ viele sein, sonst geht es einfach zu schnell.

das bild auf der html seite muss jetzt den namen "diabild" haben, also img src="" name="diabild", die geschwindigkeit des bildwechsels wird unter var speed eingestellt (5 sec = 5000, 6 sec= 6000 usw), die bilder müssen im gleichen ordner wie die html-datei liegen, ansonsten anpassen im array, so und hier das script

getestet habe ich es unter firefox,nn7, ie5 und safari, leider alle unter macos x

var imagenames =new Array("001ani.jpg","002ani.jpg","003ani.jpg","004ani.jpg"); //Def ein Array mit den Bildern die geladen werden sollen
var yposition=250; // Pos Ladebalken von oben in Pix


var loadedcolor='#E89B29' ; // Farbe


var unloadedcolor='white'; // bgcolor

var barheight=15; // Höhe Progressbar in Px

var barwidth=250; // Breite in Pix

var bordercolor='black'; // Rahmenfarbe

var pos = 0; //Interne Var
var speed = 5000; // Wie schnell soll das Bild wechseln

var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;

var IE4 = (document.all)? true : false;

var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;

var imagesdone=false;

var blocksize=barwidth/(imagenames.length);
barheight=Math.max(barheight,25);

var loaded=0, perouter, perdone, images=new Array();

var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';

if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
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">PEPATO | GROUP...</font></center></td></tr></table>';

if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<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">PEPATO | GROUP...</font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';

document.write(txt);

function loadimages(){
if(NS4){
perouter=document.perouter;
perdone=document.perouter.document.layers[0].document.perdone;
}
if(NS6){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
}
if(IE4){
perouter=document.all.perouter;
perdone=document.all.perdone;
}
cliplayer(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];

setTimeout('checkload('+n+')' ,n*100);
}
diashow();


}
function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
perouter.style.left=x+'px';
perouter.style.top=yposition+'px';
perouter.style.visibility="visible";
}
}
function dispbars(){
loaded++;
cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
}
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
}
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;

}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
function diashow()
{
if (!(document.images)) {return;}

document.diabild.src=imagenames[pos++];

if (pos == imagenames.length) { pos = 0; }
setTimeout("diashow();",speed);
}


window.onload=loadimages;


gruss randy
<adobe promotor>


als Antwort auf: [#118299]

...loading

randy
Beiträge gesamt: 436

8. Nov 2004, 14:17
Beitrag # 11 von 12
Beitrag ID: #122315
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
was ich noch vergessen hatte,

das ding hat jetzt auch 'ne diashow, sprich du kannst die von golive heraus nehmen.

gruss randy
<adobe promotor>


als Antwort auf: [#118299]

...loading

heinz weidenhueller
Beiträge gesamt: 73

8. Nov 2004, 17:20
Beitrag # 12 von 12
Beitrag ID: #122406
Bewertung:
(2632 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Randolph,

ich habe mir den Link schon mal angeguckt. Da klappt es ja prima. Jetzt werde ich es mal selbst testen.

Danke und Gruß

Heinz


als Antwort auf: [#118299]
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/