Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
preloade billeder i javascript
1 view
Skip to first unread message
scootergrisen
Dec 8, 2011, 10:31:57 PM12/8/11
to
Hvordan ville i gøre hvis i skulle preloade 2 billeder i javascript
sådan at de er hentet af brugerens browser før javascript begynder og
gøre andet med dem.
Jeg har noget kode hvor hvis man indlæser siden så vises billederne ikke
men hvis man så indlæser siden igen så vises de.
Tænker at det er fordi de ikke er nået at blive indlæst før resten af
koden prøver at gøre noget med dem.
sådan at de er hentet af brugerens browser før javascript begynder og
gøre andet med dem.
Jeg har noget kode hvor hvis man indlæser siden så vises billederne ikke
men hvis man så indlæser siden igen så vises de.
Tænker at det er fordi de ikke er nået at blive indlæst før resten af
koden prøver at gøre noget med dem.
Stig Johansen
Dec 9, 2011, 2:46:28 AM12/9/11
to
Browseren henter selv <img> tags - hvad er dit problem?
Du kan evt. lægge en onload eventhandler ind på dit <img>.
--
Med venlig hilsen
Stig Johansen
Birger Sørensen
Dec 9, 2011, 3:16:14 AM12/9/11
to
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://skippersevent.dk
Bertel Lund Hansen
Dec 9, 2011, 4:04:23 AM12/9/11
to
Stig Johansen skrev:
> Du kan evt. lægge en onload eventhandler ind på dit <img>.
Preload kan klares i ren CSS og HTML:
#preload { display: none; }
<body>
<div id='preload'>
<img src='Zakarias.jpg' alt='Zakarias'>
</div>
--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/
> Du kan evt. lægge en onload eventhandler ind på dit <img>.
#preload { display: none; }
<body>
<div id='preload'>
<img src='Zakarias.jpg' alt='Zakarias'>
</div>
--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/
Stig Johansen
Dec 9, 2011, 5:24:18 AM12/9/11
to
Bertel Lund Hansen wrote:
> Stig Johansen skrev:
>
>> Du kan evt. lægge en onload eventhandler ind på dit <img>.
>
> Preload kan klares i ren CSS og HTML:
Ja, men det lyder lidt som om han får startet noget javascript for tidligt.
> Stig Johansen skrev:
>
>> Du kan evt. lægge en onload eventhandler ind på dit <img>.
>
> Preload kan klares i ren CSS og HTML:
Hvis man (jeg) skal forholde sig til problemet må der et eksempel på bordet.
Birger skriver lidt om .onload, men den bliver vist ikke udført før hele
dokumentet er loaded - eller måske husker jeg forkert.
Scooteren må nok forklare nærmere hvis han skal have et kvalificeret svar.
scootergrisen
Dec 9, 2011, 2:14:42 PM12/9/11
to
> Dit spørgsmål er lidt diffust.
> Browseren henter selv<img> tags - hvad er dit problem?
Problemet er at billedet jeg skal flytte på skærmen med javascript ikke
> Browseren henter selv<img> tags - hvad er dit problem?
altid vises.
> Du kan evt. lægge en onload eventhandler ind på dit<img>.
hvert fald.
scootergrisen
Dec 9, 2011, 2:16:07 PM12/9/11
to
> Preload kan klares i ren CSS og HTML:
>
> #preload { display: none; }
>
> <body>
> <div id='preload'>
> <img src='Zakarias.jpg' alt='Zakarias'>
> </div>
Hvad har det med preload at gøre ?
>
> #preload { display: none; }
>
> <body>
> <div id='preload'>
> <img src='Zakarias.jpg' alt='Zakarias'>
> </div>
Du skjuler jo bare billedet.
scootergrisen
Dec 9, 2011, 2:17:00 PM12/9/11
to
> Scooteren m� nok forklare n�rmere hvis han skal have et kvalificeret svar.
Det er det her som ikke altid virker :
http://scootergrisen.dk/htmlgrisen/kode_canvas_animation.php#canvas_animation_3
Genindl�ser jeg sider mange gange er der nogen gange hvor billedet ikke
vises.
Det er det her som ikke altid virker :
http://scootergrisen.dk/htmlgrisen/kode_canvas_animation.php#canvas_animation_3
Genindl�ser jeg sider mange gange er der nogen gange hvor billedet ikke
vises.
Birger Sørensen
Dec 9, 2011, 5:10:43 PM12/9/11
to
Følgende er skrevet af scootergrisen:
>> Scooteren må nok forklare nærmere hvis han skal have et kvalificeret svar.
> vises.
Det går gal her
canvas3 = document.getElementById("canvasanimation3");
js tildeler formentlig null, hvis det kører inden dokumentet er
færdigloadet. Men hvis dokumentet er hurtigt nok, kan det måske nå det
- så nogen gange virker det, andre ikke.
Din kode skal skrives en del om, for at få det til at virke..
<script type="text/javascript">
var canvas = null;
var context3 = null;
var animation3x = 0;
var animation3y = 0;
var retning = 5;
window.onload = function() {
canvas3 = document.getElementById("canvasanimation3");
context3 = canvas3.getContext("2d");
tegn_scooter();
}
var scootera = new Image();
var scooterb = new Image();
var scooter = new Image();
scootera.src = "/htmlgrisen/billeder/billed0107.png";
scooterb.src = "/htmlgrisen/billeder/billed0091.png";
scooter.src = scootera.src;
function tegn_scooter(){
if(animation3x < 0){
scooter.src = scootera.src;
}
else if(animation3x >= (canvas3.width - scootera.width)){
scooter.src = scooterb.src;
}
context3.clearRect(0,0,canvas3.width,canvas3.height);
context3.drawImage(scooter, animation3x, animation3y);
animation3x = animation3x + retning;
if(animation3x < 0 || animation3x > 360 - 180 - 5){
retning = -retning;
}
}
scooter.onload = function(){
setInterval(tegn_scooter, 100);
}
</script>
onload på window og scooter bør gøres unobtrusive - men den slags
plejer vist ikke at genere dig.
>> Scooteren må nok forklare nærmere hvis han skal have et kvalificeret svar.
>
> Det er det her som ikke altid virker :
> http://scootergrisen.dk/htmlgrisen/kode_canvas_animation.php#canvas_animation_3
>
> Genindlæser jeg sider mange gange er der nogen gange hvor billedet ikke
> Det er det her som ikke altid virker :
> http://scootergrisen.dk/htmlgrisen/kode_canvas_animation.php#canvas_animation_3
>
> vises.
Det går gal her
canvas3 = document.getElementById("canvasanimation3");
js tildeler formentlig null, hvis det kører inden dokumentet er
færdigloadet. Men hvis dokumentet er hurtigt nok, kan det måske nå det
- så nogen gange virker det, andre ikke.
Din kode skal skrives en del om, for at få det til at virke..
<script type="text/javascript">
var canvas = null;
var context3 = null;
var animation3x = 0;
var animation3y = 0;
var retning = 5;
window.onload = function() {
canvas3 = document.getElementById("canvasanimation3");
context3 = canvas3.getContext("2d");
tegn_scooter();
}
var scootera = new Image();
var scooterb = new Image();
var scooter = new Image();
scootera.src = "/htmlgrisen/billeder/billed0107.png";
scooterb.src = "/htmlgrisen/billeder/billed0091.png";
scooter.src = scootera.src;
function tegn_scooter(){
if(animation3x < 0){
scooter.src = scootera.src;
}
else if(animation3x >= (canvas3.width - scootera.width)){
scooter.src = scooterb.src;
}
context3.clearRect(0,0,canvas3.width,canvas3.height);
context3.drawImage(scooter, animation3x, animation3y);
animation3x = animation3x + retning;
if(animation3x < 0 || animation3x > 360 - 180 - 5){
retning = -retning;
}
}
scooter.onload = function(){
setInterval(tegn_scooter, 100);
}
</script>
onload på window og scooter bør gøres unobtrusive - men den slags
plejer vist ikke at genere dig.
scootergrisen
Dec 10, 2011, 5:22:55 AM12/10/11
to
Er det ik noget med window.onload kun kan kaldes én gang per side ?
Fordi jeg har flere kode eksempler per side og vil derfor gerne undgå at
bruge window.onload hvis den kun kan bruges en gang per side.
Jeg fatter ikke hvorfor er der forskel på animationen om jeg bruger :
scooter.onload = function(){
setInterval(tegn_scooter, 100);
}
scooterb.onload = function(){
setInterval(tegn_scooter, 100);
}
Den første der kommer animationen til at køre hurtigere og hurtigere.
Den anden køre med normal hastighed.
Hvorfor kan jeg ikke bruge :
scooter.onload = function(){
scootera.onload = function(){
scooterb.onload = function(){
setInterval(tegn_scooter, 100);
}
}
}
? Så kommer der ikke noget.
Birger Sørensen
Dec 10, 2011, 8:09:51 AM12/10/11
to
scootergrisen formulerede Saturday:
> Kender ikke ordet "unobtrusive".
>
> Er det ik noget med window.onload kun kan kaldes én gang per side ?
> Fordi jeg har flere kode eksempler per side og vil derfor gerne undgå at
> bruge window.onload hvis den kun kan bruges en gang per side.
>
> Jeg fatter ikke hvorfor er der forskel på animationen om jeg bruger :
>
> scooter.onload = function(){
> setInterval(tegn_scooter, 100);
> }
>
> eller
>
> scooterb.onload = function(){
> setInterval(tegn_scooter, 100);
> }
>
> Den første der kommer animationen til at køre hurtigere og hurtigere. Den
> anden køre med normal hastighed.
>
> Hvorfor kan jeg ikke bruge :
>
> scooter.onload = function(){
> scootera.onload = function(){
> scooterb.onload = function(){
> setInterval(tegn_scooter, 100);
> }
> }
> }
>
> ? Så kommer der ikke noget.
For at tage det sidste først...
Det fordi du bruger setInterval. Den findes svjh. ikke mere i alle
browsere (men det kan godt tænkes, at bagud compatibilitet får tingene
til at vorke alligevel).
Brug setTimeOut i stedet - syntaxen er mage til.
Forskellen er, at setInterval bliver ved med at fyre, med det interval
der angives - setTimeOut fyrer kun een gang. Derfor går det hurtigere
og hurtigere.
unobtrusive og onload...
Unobtrusive angiver at der ikke er kald i HTML til scriptet. Men med
til begrebet hører også, at det ikke påvirker anden funktionalitet - og
ikke påvirkes af andre ting andre scripts foretager sig.
Og jo, onload kaldes kun een gang - derfor er den måde at gøre tingene
på, ikke unobtrusive - window.onload = function... vil fjerne anden
funktionalitet, der allerede er tildelt window.onload. Tilsvarende vil
senere tildelinger til window.onload fjerne denne funktionalitet.
Det rigtige er at bruge addEventListener() i browsere og attachEvent()
i IE, fordi disse (DOM-)funktioner tilføjer funktinalitet, i stedet for
at sætte onload direkte. (Og fordi IE insisterer på at skille sig ud,
bliver tingene så lidt mere komplicerede...)
Og her følger så omtrent som jeg ville gøre det:
<script type="text/javascript">
var canvas = null;
var context3 = null;
var animation3x = 0;
var animation3y = 0;
var retning = 5;
var timer = null;
SetEvt(scooter, 'load', function() { timer = setTimeOut(tegn_scooter,
100); });
function SetEvt(elm, evt, fnc) { // sætter event handlere på elementer
if (elm) {
if (elm.addEventListener) { // for rigtige browsere
elm.addEventListener(evt, fnc, false);
}
else if (elm.attachEvent) { // for IE
elm.attachEvent('on'+evt, fnc);
}
}
}
function InitScooter() {
}
function tegn_scooter() {
if (timer) { clearTimeOut(timer); }
Der er nogle afvigelser fra din oprindelige programmering, og
ovenstående er ikke testet - mener dog det skulle være OK.
Har du spørgsmål til hvorfor og hvordan, svarer jeg gerne.
> Kender ikke ordet "unobtrusive".
>
> Er det ik noget med window.onload kun kan kaldes én gang per side ?
> Fordi jeg har flere kode eksempler per side og vil derfor gerne undgå at
> bruge window.onload hvis den kun kan bruges en gang per side.
>
> Jeg fatter ikke hvorfor er der forskel på animationen om jeg bruger :
>
> scooter.onload = function(){
> setInterval(tegn_scooter, 100);
> }
>
> eller
>
> scooterb.onload = function(){
> setInterval(tegn_scooter, 100);
> }
>
> Den første der kommer animationen til at køre hurtigere og hurtigere. Den
> anden køre med normal hastighed.
>
> Hvorfor kan jeg ikke bruge :
>
> scooter.onload = function(){
> scootera.onload = function(){
> scooterb.onload = function(){
> setInterval(tegn_scooter, 100);
> }
> }
> }
>
> ? Så kommer der ikke noget.
Det fordi du bruger setInterval. Den findes svjh. ikke mere i alle
browsere (men det kan godt tænkes, at bagud compatibilitet får tingene
til at vorke alligevel).
Brug setTimeOut i stedet - syntaxen er mage til.
Forskellen er, at setInterval bliver ved med at fyre, med det interval
der angives - setTimeOut fyrer kun een gang. Derfor går det hurtigere
og hurtigere.
unobtrusive og onload...
Unobtrusive angiver at der ikke er kald i HTML til scriptet. Men med
til begrebet hører også, at det ikke påvirker anden funktionalitet - og
ikke påvirkes af andre ting andre scripts foretager sig.
Og jo, onload kaldes kun een gang - derfor er den måde at gøre tingene
på, ikke unobtrusive - window.onload = function... vil fjerne anden
funktionalitet, der allerede er tildelt window.onload. Tilsvarende vil
senere tildelinger til window.onload fjerne denne funktionalitet.
Det rigtige er at bruge addEventListener() i browsere og attachEvent()
i IE, fordi disse (DOM-)funktioner tilføjer funktinalitet, i stedet for
at sætte onload direkte. (Og fordi IE insisterer på at skille sig ud,
bliver tingene så lidt mere komplicerede...)
Og her følger så omtrent som jeg ville gøre det:
<script type="text/javascript">
var canvas = null;
var context3 = null;
var animation3x = 0;
var animation3y = 0;
var retning = 5;
var scootera = new Image();
var scooterb = new Image();
var scooter = new Image();
scootera.src = "/htmlgrisen/billeder/billed0107.png";
scooterb.src = "/htmlgrisen/billeder/billed0091.png";
SetEvt(window, 'load', InitScooter);
var scooterb = new Image();
var scooter = new Image();
scootera.src = "/htmlgrisen/billeder/billed0107.png";
scooterb.src = "/htmlgrisen/billeder/billed0091.png";
SetEvt(scooter, 'load', function() { timer = setTimeOut(tegn_scooter,
100); });
function SetEvt(elm, evt, fnc) { // sætter event handlere på elementer
if (elm) {
if (elm.addEventListener) { // for rigtige browsere
elm.addEventListener(evt, fnc, false);
}
else if (elm.attachEvent) { // for IE
elm.attachEvent('on'+evt, fnc);
}
}
}
function InitScooter() {
canvas3 = document.getElementById("canvasanimation3");
context3 = canvas3.getContext("2d");
scooter.src = scootera.src; // eller tegn_scooter();
context3 = canvas3.getContext("2d");
}
function tegn_scooter() {
if (timer) { clearTimeOut(timer); }
if(animation3x < 0){
scooter.src = scootera.src;
}
else if(animation3x >= (canvas3.width - scootera.width)){
scooter.src = scooterb.src;
}
context3.clearRect(0,0,canvas3.width,canvas3.height);
context3.drawImage(scooter, animation3x, animation3y);
animation3x = animation3x + retning;
if(animation3x < 0 || animation3x > 360 - 180 - 5){
retning = -retning;
}
}
</script>
scooter.src = scootera.src;
}
else if(animation3x >= (canvas3.width - scootera.width)){
scooter.src = scooterb.src;
}
context3.clearRect(0,0,canvas3.width,canvas3.height);
context3.drawImage(scooter, animation3x, animation3y);
animation3x = animation3x + retning;
if(animation3x < 0 || animation3x > 360 - 180 - 5){
retning = -retning;
}
}
Der er nogle afvigelser fra din oprindelige programmering, og
ovenstående er ikke testet - mener dog det skulle være OK.
Har du spørgsmål til hvorfor og hvordan, svarer jeg gerne.
scootergrisen
Dec 10, 2011, 12:39:12 PM12/10/11
to
> Brug setTimeOut i stedet - syntaxen er mage til.
Men jeg skal have udført noget kode igen og igen fordi det er en
animation hvor billedet flyttes lidt efter lidt.
> Det rigtige er at bruge addEventListener() i browsere og attachEvent() i
> IE
fordi <canvas> virker alligevel kun fra nummer 9.
Hvis jeg nu har 2 billeder og vil udføre noget kode når de begge er
onload'ede hvordan gør jeg så.
Ville gerne kunne sige noget i stil med :
scootera.addEventListener("load", function() {
&& scooterb.addEventListener("load", function() {
setInterval(tegn_scooter, 100);
}, true);
Kan man gøre sådan hvor man sige OG (&&) sådan at setInterval() koden
kun udføres når både scootera og scooterb er loadede.
Birger Sørensen
Dec 10, 2011, 1:41:36 PM12/10/11
to
scootergrisen forklarede den 12/10/2011:
Nej, det kan du ikke gøre på den måde, og det vil give dig en
script-fejl ved &&.
SetEventListener() er en funktion, der tager to parametre - den anden
skal være en funktion. Selv om dit forslag skulle virke (og sådan som
du oprindelig havde gjort det), bliver tildelingen til scooterb,
gentaget hver gang scootera er loaded - hvilket vil resultere i at der
bliver tildelt den samme funktion temmelig mange gange til onload på
scooterb - hvilet så også vil betyde at der startes temmelig mange
interval timere, og animationen vil køre så hurtigt din PC/browser kan
afvikle js..
Image objectet har en parameter der sjældent bruges : complete
Den er falsk hvis billedet er loaded - skifter til sand, når det er
loadet.
Så du kan gøre sådan:
scottera.addEvetListener('load', StartInterval);
scotterb.addEvetListener('load', StartInterval);
function StartInterval() {
if (scoortera.complete && scooterb.complete) {
setInterval(tegn_scooter, 100);
}
}
Dog bør du stadig bruge setTimeout og ikke setInterval...
setInterval fortsætter efter det kald den laver.
I dit eksempel, vil den kalde tegn:scooter, hver gang der er gået 0,1
sekund.
Men du starter den hver gang et billede er loadet - så du får mange
interval-timere kørende. Og det vil igen være din PC/browsers afvikling
af js, der bestemmer hvor hurtigt animationen kører - ikke det interval
du sætter.
script-fejl ved &&.
SetEventListener() er en funktion, der tager to parametre - den anden
skal være en funktion. Selv om dit forslag skulle virke (og sådan som
du oprindelig havde gjort det), bliver tildelingen til scooterb,
gentaget hver gang scootera er loaded - hvilket vil resultere i at der
bliver tildelt den samme funktion temmelig mange gange til onload på
scooterb - hvilet så også vil betyde at der startes temmelig mange
interval timere, og animationen vil køre så hurtigt din PC/browser kan
afvikle js..
Image objectet har en parameter der sjældent bruges : complete
Den er falsk hvis billedet er loaded - skifter til sand, når det er
loadet.
Så du kan gøre sådan:
scottera.addEvetListener('load', StartInterval);
scotterb.addEvetListener('load', StartInterval);
function StartInterval() {
if (scoortera.complete && scooterb.complete) {
setInterval(tegn_scooter, 100);
}
}
Dog bør du stadig bruge setTimeout og ikke setInterval...
setInterval fortsætter efter det kald den laver.
I dit eksempel, vil den kalde tegn:scooter, hver gang der er gået 0,1
sekund.
Men du starter den hver gang et billede er loadet - så du får mange
interval-timere kørende. Og det vil igen være din PC/browsers afvikling
af js, der bestemmer hvor hurtigt animationen kører - ikke det interval
du sætter.
scootergrisen
Dec 10, 2011, 2:29:32 PM12/10/11
to
> scottera.addEvetListener('load', StartInterval);
> scotterb.addEvetListener('load', StartInterval);
>
> function StartInterval() {
> if (scoortera.complete && scooterb.complete) {
> setInterval(tegn_scooter, 100);
> }
> }
Problemet med den kode er at tegn_scooter() kaldes dobbelt så ofte som
> scotterb.addEvetListener('load', StartInterval);
>
> function StartInterval() {
> if (scoortera.complete && scooterb.complete) {
> setInterval(tegn_scooter, 100);
> }
> }
den skal.
Den kaldes når scootera billedet er loadet og igen når scooterb er
loadet... derfor kommer animationen til at køre for hurtigt.
Birger Sørensen
Dec 10, 2011, 3:20:12 PM12/10/11
to
scootergrisen udtrykte præcist:
Det kører sikkert for hurtigt - men det er nok nærmere fordi du bruger
setInterval og ikke fordi koden ikke virker...
Som jeg forstår din kode, er det det image der hedder scooter (uden a
eller b), der er det billede du skifter, og det er så også det der skal
starte Timeren.
Altså som jeg har det i min oprindelige kode - eller blot
scooter.addEvetListener('load', StartInterval);
Et alternativ er at bruge setInterval(), som det måske ser ud somom du
forsøger.
Det har den ulempe, at billedet skifter, uanset om det faktisk er
loadet, eller ej - altså animationen kører måske mere jævnt, til
gengæld risikerer du at de enkelte billeder ikke bliver vist lige
længe; har din computer travlt, kan nogen af dem blive sprunget helt
over.
var scootera = new Image();
scottera.addEvetListener('load', StartInterval);
setInterval og ikke fordi koden ikke virker...
Som jeg forstår din kode, er det det image der hedder scooter (uden a
eller b), der er det billede du skifter, og det er så også det der skal
starte Timeren.
Altså som jeg har det i min oprindelige kode - eller blot
scooter.addEvetListener('load', StartInterval);
Et alternativ er at bruge setInterval(), som det måske ser ud somom du
forsøger.
Det har den ulempe, at billedet skifter, uanset om det faktisk er
loadet, eller ej - altså animationen kører måske mere jævnt, til
gengæld risikerer du at de enkelte billeder ikke bliver vist lige
længe; har din computer travlt, kan nogen af dem blive sprunget helt
over.
var scootera = new Image();
var scooterb = new Image();
scotterb.addEvetListener('load', StartInterval);
scootera.src = "/htmlgrisen/billeder/billed0107.png";
scooterb.src = "/htmlgrisen/billeder/billed0091.png";
scooterb.src = "/htmlgrisen/billeder/billed0091.png";
function StartInterval() {
if (scoortera.complete && scooterb.complete) {
setInterval(tegn_scooter, 100);
}
}
(Her skal det være setInterval - den skal kun kaldes een gang!)
if (scoortera.complete && scooterb.complete) {
setInterval(tegn_scooter, 100);
}
}
scootergrisen
Dec 10, 2011, 7:03:50 PM12/10/11
to
Ah jeg kendte ikke den .complete ting.
Tror jeg har fundet en løsning nu :
http://scootergrisen.dk/htmlgrisen/kode_canvas_animation.php#canvas_animation_3
Tror jeg har fundet en løsning nu :
http://scootergrisen.dk/htmlgrisen/kode_canvas_animation.php#canvas_animation_3
Birger Sørensen
Dec 11, 2011, 7:18:17 AM12/11/11
to
Efter mange tanker skrev scootergrisen:
I teorien har du dog stadig hazard. Den første linie i dit js
canvas3 = document.getElementById("canvasanimation3");
returnerer null, hvis dokumentet ikke er færdig med at loade når js
køres (og dit js vil ikke virke, men give en masse fejl) - ellers
returnerer den det rigtige element, og tingene virker.
Derfor bør de to første linier
bør checke om een af dem != null.
At det virker hos dig og mig, betyder at vores forbindelese er hurtig
nok til at dokumentet når at loade inden js'et køres - det er ikke
sikkeret andre er så heldige...
> Ah jeg kendte ikke den .complete ting.
>
> Tror jeg har fundet en løsning nu :
>
> http://scootergrisen.dk/htmlgrisen/kode_canvas_animation.php#canvas_animation_3
Det ser ud til at virke...
>
> Tror jeg har fundet en løsning nu :
>
> http://scootergrisen.dk/htmlgrisen/kode_canvas_animation.php#canvas_animation_3
I teorien har du dog stadig hazard. Den første linie i dit js
canvas3 = document.getElementById("canvasanimation3");
køres (og dit js vil ikke virke, men give en masse fejl) - ellers
returnerer den det rigtige element, og tingene virker.
Derfor bør de to første linier
canvas3 = document.getElementById("canvasanimation3");
context3 = canvas3.getContext("2d");
stadig lægges i en funktion i window.onload og tegn_scooter funktionen
context3 = canvas3.getContext("2d");
bør checke om een af dem != null.
At det virker hos dig og mig, betyder at vores forbindelese er hurtig
nok til at dokumentet når at loade inden js'et køres - det er ikke
sikkeret andre er så heldige...
scootergrisen
Dec 11, 2011, 9:19:40 AM12/11/11
to
> Derfor bør de to første linier
> canvas3 = document.getElementById("canvasanimation3");
> context3 = canvas3.getContext("2d");
> stadig lægges i en funktion i window.onload og tegn_scooter funktionen
> bør checke om een af dem != null.
Jeg syns aldrig jeg har haft problemer der... så længe javascript koden
> canvas3 = document.getElementById("canvasanimation3");
> context3 = canvas3.getContext("2d");
> stadig lægges i en funktion i window.onload og tegn_scooter funktionen
> bør checke om een af dem != null.
kommer efter <canvas>... men det kan jeg jo godt bruge fordi i starten
kunne jeg ikke forstå hvorfor min kode ikke virkede når <canvas> var
placeret efter koden og det virker så med en event load ting.
Men tak det ser ud til at virke som jeg ville have det til nu.
Birger Sørensen
Dec 11, 2011, 9:30:59 AM12/11/11
to
scootergrisen har bragt dette til verden:
...
Det er vel godt nok, hvis man ser bort fra unobtrusive (script er i
header hvor det hører til), best practise, opdeling (fomattering i CSS,
funktionalitet i script, inkludering af andre filer i headeren, så kun
indhold er i body af HTML'en), læsebarhed, vedligeholdelsesvenlighed...
Men selvtak B-)
Det er vel godt nok, hvis man ser bort fra unobtrusive (script er i
header hvor det hører til), best practise, opdeling (fomattering i CSS,
funktionalitet i script, inkludering af andre filer i headeren, så kun
indhold er i body af HTML'en), læsebarhed, vedligeholdelsesvenlighed...
Men selvtak B-)
Stig Johansen
Dec 13, 2011, 3:41:09 AM12/13/11
to
scootergrisen wrote:
>> Det rigtige er at bruge addEventListener() i browsere og attachEvent() i
>> IE
>
> addEventListener() virker også i internet explorer 9 og det er fint nok
> fordi <canvas> virker alligevel kun fra nummer 9.
Hvis du en gang for alle strukturerer dine .js filer, så er her lidt
>> Det rigtige er at bruge addEventListener() i browsere og attachEvent() i
>> IE
>
> addEventListener() virker også i internet explorer 9 og det er fint nok
> fordi <canvas> virker alligevel kun fra nummer 9.
inspiration fra min events.js:
-----------------
function addEvents (eventobject,eventtype,eventfunction) {
if ( eventobject.addEventListener ) {
eventobject.addEventListener (eventtype,eventfunction,false) ;
} else if( eventobject.attachEvent ) {
eventobject.attachEvent ('on'+eventtype,eventfunction) ;
} else {
eventobject['on' + eventtype] = eventfunction ;
}
}
function removeEvents (eventobject,eventtype,eventfunction) {
if ( eventobject.removeEventListener ) {
eventobject.removeEventListener (eventtype,eventfunction,false) ;
} else if( eventobject.detachEvent ) {
eventobject.detachEvent ('on'+eventtype,eventfunction) ;
} else {
eventobject['on' + eventtype] = null ;
}
}
function eventsource(e) {
var src ;
if (window.event) {
src = window.event.srcElement; // For IE
} else {
src = e.target; // For Firefox
}
if ( src.nodeName == '#text') src = src.parentNode ;
return src ;
}
function keynbr(e) {
e = e || window.event;
return e.keyCode || e.which ;
}
function mousecoords(ev) {
var e = ev || window.event ;
if(e.pageX || e.pageY){
return {x:e.pageX,y:e.pageY };
} else {
return {x:e.clientX,y:e.clientY} ;
}
}
function getXY(element) {
var top = 0;
var left = 0;
while (element.offsetParent){
top += element.offsetTop;
left += element.offsetLeft;
element = element.offsetParent;
}
top += element.offsetTop;
left += element.offsetLeft;
return {x:left,y:top} ;
}
function scroll () {
if (document.all) {
var iebody=(document.compatMode && document.compatMode !=
"BackCompat")? document.documentElement : document.body
var X = iebody.scrollLeft ;
var Y = iebody.scrollTop ;
} else {
var X = window.pageXOffset ;
var Y = window.pageYOffset ;
}
return {x:X,y:Y} ;
}
-------------------
Det er en del af et større 'kompleks' som det vil føre for vidt at redegøre
for.
For den 'opmærksomme' læser ligger der dog nogle 'guldkorn'.
scootergrisen
Dec 13, 2011, 10:30:45 AM12/13/11
to
Takker jeg har gemt det og kan ikke bruge det senere.
På et tidspunkt havde jeg store problemer med mousens x og y når man
klikkede så der skulle jeg nok havde haft din kode.
Hvis jeg senere for problemer så kigger jeg på din kode og ser om
løsningen ikke er der.
På et tidspunkt havde jeg store problemer med mousens x og y når man
klikkede så der skulle jeg nok havde haft din kode.
Hvis jeg senere for problemer så kigger jeg på din kode og ser om
løsningen ikke er der.
Stig Johansen
Dec 14, 2011, 3:38:52 AM12/14/11
to
scootergrisen wrote:
> Takker jeg har gemt det og kan ikke bruge det senere.
> På et tidspunkt havde jeg store problemer med mousens x og y når man
> klikkede så der skulle jeg nok havde haft din kode.
tale om scrool på en side.
Problemet er (nogle gange) at koordinater er relativt til skærmen, og ikke
dokumentet, derfor skal man have scroll med i billedet, da man ellers
'rammer forkert'.
> Hvis jeg senere for problemer så kigger jeg på din kode og ser om
> løsningen ikke er der.
Det er et uddrag af *fungerende* løsninger fra IE6 og op + 'de andre' :-)
Hvis du (eller i) vil have lidt sjov til julen, så er her lidt fra mit
'stargate' projekt, som egentlig kun var for at afdække nogle
problemstillinger.
* manipulering/placering af billeder.
men vigtigst:
* Har man klikket inden for en arbitrær polygon?
Det sidste er et udtryk for en _beregnet_ polygon og ikke em 'imagemap'.
HTML'et:
------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>W.O.P.R Stargate</title>
<script type="text/javascript"
src="/javascript/wopr.stargate.js"></script>
</head>
<body onload="initialize_stargate();">
<div>
<img id="sparre_sel" src="images/glyph01.gif" alt="sparre1" style="position:
absolute;"/>
<table>
<tr><td>TESTER</td><td>
<div id="stargate" style="margin:0;padding:0;"><img
style="margin:0;padding:0;border:none;" id="stargate_picture"
alt="Stargate" title="Picture of stargate" src="gate.gif" width="600"
height="600"/></div>
<div id="sparreclick"></div>
</td></tr></table>
</div>
</body>
</html>
---------------------
Og js'et (bemærk redundans i forhold til andet):
---------------------
var stargatebaseX ;
var stargatebaseY ;
var stargate_maxX ;
var stargate_maxY ;
var stargate_arrayX = new Array ;
var stargate_arrayY = new Array ;
var sparre_sel ;
var stargate_sparre_arrayX = new Array ;
var stargate_sparre_arrayY = new Array ;
function stargate_create_sparre_click(sparre_polygon,index) {
var sp_arrayX = new Array ;
var sp_arrayY = new Array ;
for ( var i = 0 ; i <sparre_polygon.length/2 ;i++) {
sp_arrayX[i] = sparre_polygon[i*2] ;
sp_arrayY[i] = sparre_polygon[i*2+1] ;
}
stargate_arrayX[index-1] = sp_arrayX ;
stargate_arrayY[index-1] = sp_arrayY ;
}
function stargate_create_sparre_pos(sparre_XY,index) {
stargate_sparre_arrayX[index-1] = sparre_XY[0] ;
stargate_sparre_arrayY[index-1] = sparre_XY[1] ;
}
stargate_create_sparre_click([280, 90, 274, 22, 319, 22, 315, 90],1) ;
stargate_create_sparre_pos([274,23],1) ;
stargate_create_sparre_click([318, 87, 323, 19, 362, 27, 346, 92],2) ;
stargate_create_sparre_pos([318,25],2) ;
stargate_create_sparre_click([347, 94, 363, 24, 399, 40, 376, 102],3) ;
stargate_create_sparre_pos([349,30],3) ;
stargate_create_sparre_click([374, 102, 402, 43, 437, 56, 402, 114],4) ;
stargate_create_sparre_pos([374,43],4) ;
stargate_create_sparre_click([404, 118, 437, 56, 473, 77, 431, 132],5) ;
stargate_create_sparre_pos([404,56],5) ;
stargate_create_sparre_click([430, 134, 472, 77, 502, 104, 452, 149],6) ;
stargate_create_sparre_pos([430,77],6) ;
stargate_create_sparre_click([452, 153, 503, 103, 529, 141, 472, 179],7) ;
stargate_create_sparre_pos([452,103],7) ;
stargate_create_sparre_click([475, 179, 530, 137, 553, 174, 491, 206],8) ;
stargate_create_sparre_pos([475,137],8) ;
stargate_create_sparre_click([494, 208, 556, 176, 567, 219, 507, 240],9) ;
stargate_create_sparre_pos([494,176],9) ;
stargate_create_sparre_click([503, 245, 569, 218, 577, 260, 510, 268],10) ;
stargate_create_sparre_pos([503,218],10) ;
stargate_create_sparre_click([511, 274, 579, 258, 579, 300, 517, 303],11) ;
stargate_create_sparre_pos([511,258],11) ;
stargate_create_sparre_click([512, 306, 578, 304, 576, 339, 511, 329],12) ;
stargate_create_sparre_pos([511,306],12) ;
stargate_create_sparre_click([512, 333, 580, 339, 570, 382, 504, 362],13) ;
stargate_create_sparre_pos([504,333],13) ;
stargate_create_sparre_click([506, 365, 572, 385, 554, 423, 489, 391],14) ;
stargate_create_sparre_pos([489,365],14) ;
stargate_create_sparre_click([490, 395, 552, 420, 526, 463, 472, 427],15) ;
stargate_create_sparre_pos([472,395],15) ;
stargate_create_sparre_click([471, 427, 529, 463, 498, 502, 449, 454],16) ;
stargate_create_sparre_pos([449,427],16) ;
stargate_create_sparre_click([447, 458, 496, 503, 456, 534, 418, 477],17) ;
stargate_create_sparre_pos([418,458],17) ;
stargate_create_sparre_click([415, 483, 453, 536, 405, 559, 381, 500],18) ;
stargate_create_sparre_pos([381,483],18) ;
stargate_create_sparre_click([379, 497, 402, 560, 354, 574, 343, 510],19) ;
stargate_create_sparre_pos([343,497],19) ;
stargate_create_sparre_click([337, 512, 352, 575, 298, 580, 300, 512],20) ;
stargate_create_sparre_pos([298,512],20) ;
stargate_create_sparre_click([297, 511, 300, 580, 255, 576, 266, 511],21) ;
stargate_create_sparre_pos([255,511],21) ;
stargate_create_sparre_click([262, 510, 254, 575, 209, 564, 230, 502],22) ;
stargate_create_sparre_pos([209,502],22) ;
stargate_create_sparre_click([230, 500, 209, 561, 173, 543, 202, 488],23) ;
stargate_create_sparre_pos([173,488],23) ;
stargate_create_sparre_click([204, 485, 173, 545, 130, 522, 171, 470],24) ;
stargate_create_sparre_pos([134,472],24) ;
stargate_create_sparre_click([172, 466, 132, 521, 101, 494, 147, 448],25) ;
stargate_create_sparre_pos([101,448],25) ;
stargate_create_sparre_click([149, 450, 101, 495, 76, 462, 131, 424],26) ;
stargate_create_sparre_pos([76,424],26) ;
stargate_create_sparre_click([132, 424, 74, 460, 48, 426, 112, 392],27) ;
stargate_create_sparre_pos([48,392],27) ;
stargate_create_sparre_click([114, 392, 49, 422, 35, 383, 98, 363],28) ;
stargate_create_sparre_pos([35,363],28) ;
stargate_create_sparre_click([100, 364, 34, 382, 24, 337, 88, 329],29) ;
stargate_create_sparre_pos([24,329],29) ;
stargate_create_sparre_click([90, 330, 25, 337, 23, 293, 87, 294],30) ;
stargate_create_sparre_pos([23,293],30) ;
stargate_create_sparre_click([88, 292, 24, 291, 27, 251, 89, 262],31) ;
stargate_create_sparre_pos([24,262],31) ;
stargate_create_sparre_click([88, 264, 27, 253, 37, 205, 97, 228],32) ;
stargate_create_sparre_pos([27,205],32) ;
stargate_create_sparre_click([99, 229, 40, 207, 53, 169, 112, 197],33) ;
stargate_create_sparre_pos([40,197],33) ;
stargate_create_sparre_click([114, 201, 57, 167, 75, 133, 131, 175],34) ;
stargate_create_sparre_pos([57,133],34) ;
stargate_create_sparre_click([130, 175, 77, 129, 106, 96, 151, 147],35) ;
stargate_create_sparre_pos([77,106],35) ;
stargate_create_sparre_click([152, 145, 109, 96, 143, 66, 180, 125],36) ;
stargate_create_sparre_pos([96,96],36) ;
stargate_create_sparre_click([182, 126, 143, 67, 185, 46, 212, 108],37) ;
stargate_create_sparre_pos([143,46],37) ;
stargate_create_sparre_click([214, 108, 188, 46, 230, 30, 248, 96],38) ;
stargate_create_sparre_pos([188,30],38) ;
stargate_create_sparre_click([248, 98, 232, 30, 273, 21, 280, 91],39) ;
stargate_create_sparre_pos([232,21],39) ;
function getY(e) {
var top = 0;
while (e.offsetParent){
top += e.offsetTop;
e = e.offsetParent;
}
return top ;
}
function getX(e) {
var left = 0;
while (e.offsetParent){
left += e.offsetLeft;
e = e.offsetParent;
}
return left ;
}
function initialize_stargate() {
var si = document.getElementById('stargate') ;
stargatebaseX = getX(si) ;
stargatebaseY = getY(si) ;
stargate_maxX = si.clientWidth ;
stargate_maxY = si.clientHeight ;
si.onmouseup = function(ev) {
setstargate_click(ev) ;
}
sparre_sel = document.getElementById('sparre_sel') ;
}
function stargate_click(image) {
alert('Image clicked' + image.id);
}
function setstargate_click(ev) {
var X ;
var Y ;
ev = ev || window.event;
if(ev.pageX || ev.pageY){
X = ev.pageX - stargatebaseX ;
Y = ( ev.pageY - stargatebaseY );
} else {
X = ev.x - stargatebaseX ;
Y = ( ev.y - stargatebaseY );
}
for ( var i = 0 ; i < stargate_arrayX.length ; i++ ) {
if ( pnpoly(stargate_arrayX[i],stargate_arrayY[i],X, Y) ) {
// alert(' glyph * ' + (i<10?'0':'')+(i+1) + ' * selected' );
document.getElementById('sparreclick').innerHTML = 'Sparre ' +
( i<9 ? '0':'')+(i+1)+' set ' ;
sparre_sel.src='images/glyph'+( i<9 ? '0':'')+(i+1)+'.sel.gif' ;
if (i==30) {
//alert('sparre 30');
document.getElementById('stargate_picture').src = 'gate.opened.png' ;
}
if (document.all) { // IE
sparre_sel.style.posTop = ( stargate_sparre_arrayY[i] +
stargatebaseY ) ;
sparre_sel.style.posLeft = ( stargate_sparre_arrayX[i] +
stargatebaseX ) ;
} else {
sparre_sel.style.top = ( stargate_sparre_arrayY[i] +
stargatebaseY ) + 'px' ;
sparre_sel.style.left = ( stargate_sparre_arrayX[i] +
stargatebaseX ) + 'px' ;
}
}
}
// alert('Position = ' + X + ' , ' + Y );
// alert (' in poly 1 ? ' +
pnpoly(stargate_arrayX[0],stargate_arrayY[0],X, Y) );
// alert (' in poly 2 ? ' +
pnpoly(stargate_arrayX[1],stargate_arrayY[1],X, Y) );
}
function pnpoly(xp,yp,x, y) {
var npol = xp.length;
var i, j, c = false;
for (i = 0, j = npol-1; i < npol; j = i++) {
if ((((yp[i] <= y) && (y < yp[j])) || ((yp[j] <= y) && (y < yp[i]))) && (x <
(xp[j] - xp[i]) * (y - yp[i]) / (yp[j] - yp[i]) + xp[i])) c =!c;
}
return c;
}
------------------------
Have fun.
scootergrisen
Dec 14, 2011, 1:03:09 PM12/14/11
to
>> Takker jeg har gemt det og kan ikke bruge det senere.
>
> Tak ;-) - hvorfor kan du ikke bruge det?
Der skulle stå... takker jeg har gemt det og KAN bruge det senere :O)
>
> Tak ;-) - hvorfor kan du ikke bruge det?
> Det er et uddrag af *fungerende* løsninger fra IE6 og op + 'de andre' :-)
ik bruger mere tid på det, men det da meget rart og vide løsningen
alligevel.
0 new messages