Op woensdag 24 april 2002 11:44 schreef drm het volgende:
Gordijnstok>
Waarom zou het wel met images kunnen en vervolgens niet met andere bestanden? En hoe?
Voor images kun je heel simpel de images preloaden met
mijnafbeelding = new Image();
mijnafneelding.src = 'afbeelding.gif';
Vervolgens kun je met de readystate parameter bekijken of de image inderdaad is ge-preload.
Ik post wel even een voorbeeldje van wat ik heel lang geleden eens in elkaar heb geflanst voor MSN Nederland.
Hierbij ging ik serverside een lijst van images genereren. Vervolgens werden deze gepreload, maar ik merkte op dat afbeeldingen vanwege de snelheid van javascript niet altijd volledig werden ingeladen, en sloeg javascript stukken preloading over. Ik heb hier dus een timeout functie omheen gecoded welke de preload de tijd geeft om de afbeelding volledig in te laden.
Ik geef hierbij een standaard tijd in ms op, voor de timeout, en als de image binnen die tijd niet de kans heeft gekregen om zichzelf te preloaden, ga ik de timeout net zolang verhogen totdat de preload tijd genoeg krijgt om de image volledig in te laden.
Aan de hand van een progressbar kon ik vervolgens de status in procenten volgen, en voor een goed stukje werd er een groen gedeelte van de progressbar geplaatst en voor een niet te laden image een rood stukje.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
| <cfdirectory action="list" directory="#GetDirectoryFromPath(GetTemplatePath())#" name="visuals_gif" filter="*.gif">
<cfdirectory action="list" directory="#GetDirectoryFromPath(GetTemplatePath())#" name="visuals_jpg" filter="*.jpg">
<cfif foutmelding EQ "">
<script language="javascript">
function initialize(){
debug = 0;
failed = 0;
success = 0;
retries = 0;
top_timeout = 0;
errors = 0;
barpiece="progressbar_piece.gif";
barerror="progressbar_error.gif";
domain="http://testomgeving/hillandknowlton_xmltool/";
max_pieces = 20;
piececount = 0;
progress_value = "";
theimage=new Array();
myimages=new Array();
errorat=new Array();
// serverside generated list of images
<cfset thisitem = visuals_gif.recordcount>
<cfoutput query="visuals_gif">
<cfset thisitem = thisitem-1>
myimages[#thisitem#]= '#visuals_gif.name#';
</cfoutput>
<cfoutput query="visuals_jpg">
<cfset thisitem = thisitem-1>
myimages[#thisitem#]= '#visuals_gif.name#';
</cfoutput>
imagecount = myimages.length;
def_timeout = 10;
timeout = def_timeout;
max_timeout = 1000;
timeout_increment = 10;
doimage = 0;
interval();
}
function interval(){
if (imagecount > doimage){
preload(doimage);
}
else{
if (debug == 1){
window.status = "Images:"+imagecount+" Failed:"+failed+" Highest Timeout:"+top_timeout+"ms"+" Highest Retry-count:"+(top_timeout/timeout_increment)+" times";
}
else{
window.status = "Loading finished...";
document.getElementById('filename').innerHTML = "<b>Loading... </b>done";
fnToggle();
}
}
}
function preload(){
theimage[doimage]=new Image()
theimage[doimage].src=myimages[doimage]
window.status = "Loading: "+theimage[doimage].src+" with a timeout of:"+timeout+"ms";
endchar = theimage[doimage].src.length;
displayfilename = theimage[doimage].src.substring(domain.length,endchar);
//document.getElementById('filename').innerHTML = "<b>Loading... </b>"+displayfilename+"";
setTimeout('checkload('+doimage+')' ,timeout);
}
function checkload(item){
if (theimage[item].readyState != 'complete'){
if (max_timeout < timeout){
// als een image niet geladen kan worden
//alert('Error\nImage:'+doimage+' could not be loaded: '+theimage[doimage].src+'\nThe maximum timeout of'+max_timeout+'has been reached');
doimage++;
errorat[Math.round(((item/imagecount)*100)*(max_pieces/100))] = true;
if(doimage == imagecount){
percentdone = Math.round(item/(imagecount-1) * 100);
barpieces = Math.round((percentdone/100)*max_pieces);
progress_value ="";
for (var j=0; j < barpieces; j++)
{
if(errorat[j]){
progress_value += "[img]\""+barerror+"\"[/img]";
}
else{
progress_value += "[img]\""+barpiece+"\"[/img]";
}
}
if (barpieces != piececount){
document.getElementById('progressbar').innerHTML = progress_value;
}
piececount = barpieces;
}
timeout = def_timeout;
interval();
}
else{
timeout = timeout + timeout_increment;
if(timeout > top_timeout){
top_timeout = timeout;
}
window.status = "Checking: "+theimage[item].src+" with a timeout of:"+timeout+"ms";
setTimeout('checkload('+item+')' ,timeout);
failed++
}
}
else{
doimage++;
timeout = def_timeout;
percentdone = Math.round(item/(imagecount-1) * 100);
barpieces = Math.round((percentdone/100)*max_pieces);
progress_value ="";
for (var j=0; j < barpieces; j++)
{
if(errorat[j]){
progress_value += "[img]\""+barerror+"\"[/img]";
}
else{
progress_value += "[img]\""+barpiece+"\"[/img]";
}
}
if (barpieces != piececount){
document.getElementById('progressbar').innerHTML = progress_value;
document.getElementById('filename').innerHTML = "<b>Loading... </b>"+percentdone+"%";
}
piececount = barpieces;
setTimeout('interval()' ,timeout);
}
}
</script> |
:strip_exif()/u/50656/andre-scholten-avatar.gif?f=community){kind=avatar}
:strip_exif()/u/22479/169-back.gif?f=community)
:strip_icc():strip_exif()/u/25938/lekkerkontje.jpg?f=community)
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
:strip_icc():strip_exif()/u/8561/avatar_ice_fok.jpg?f=community){kind=avatar}
/u/20329/donald%2520avatar.png?f=community){kind=avatar}
/u/20544/pelle-jjvv-bg.png?f=community)
:strip_exif()/u/22119/ch.gif?f=community)
