Dynamisk loading af js

Hej mik28

Prøv med denne.

function loadjscssfile(filename, filetype) {
var element;
switch(filetype){
  case 'js':
  element = document.createElement("script");
  element.src = filename;
  document.getElementsByTagName("head")[0].appendChild(element);
  break;
  case 'css':
  element = document.createElement("link");
  element.href = filename;
  element.setAttribute("rel", "stylesheet")
  element.setAttribute("type", "text/css")
  document.getElementsByTagName("head")[0].appendChild(element);
  break;
}
}

<ole>

@mik28: Tjekker du for fejl i fejlkonsollen?

/mvh
</bole>

Fejl: $ is not defined
Fejl: jQuery is not defined

Hvis jeg inspecter så ser det ud som om de er loaded

Det jeg ikke forstår er hvorfor det virker i Chrome men ikke i IE og firefox

hmmm. Jeg forstår det bare ikke :-(
I mit linkede .js har jeg en function som ser så ledes ud

var scriptloaded = "false";
function isLoaded()
{
if(scriptloaded=="false"){
alert("isLoaded kaldt!!");
loadjscssfile("http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js", "js");
loadjscssfile("/fancybox/jquery.easing-1.3.pack.js", "js");
loadjscssfile("/fancybox/jquery.mousewheel-3.0.4.pack.js", "js");
loadjscssfile("/fancybox/jquery.fancybox.css?v=2.0.3", "css");
loadjscssfile("/fancybox/jquery.fancybox.pack.js?v=2.0.3", "js");
}
scriptloaded="true";
}

jeg kalder den så fra mit kodefragment med
// load js
<script type="text/javascript">isLoaded();</script>

<script type="text/javascript">       
        $(document).ready(function() {

            $("#iframe").fancybox({
                    'width'                : 800,
                    'height'            : 600,
                    'openEffect'        : 'fade',
                    'closeEffect'        : 'fade',
                    'openSpeed'        : 1500,
                    'closeSpeed'        : 1500,
                    'scrolling'        : 'no',
                    'type'                : 'iframe',
                    'overlayOpacity'    : '0.8',
                    'overlayColor'      : '#000',
                    'centerOnScroll'    : 'true'
            });
           
        });   
    </script>

Jeg bliver bims. Hvis jeg bare sætter scripts ind i min kode <-- den som bliver kaldt x antal gange så virker det. Problemet er at den kode bliver kaldt x antal gange så scriptene bliver indlæst mere end en gang. Det var det jeg ville undgå.

Jeg tror ikke længere, jeg helt forstår, hvad problemet er  =)

Jeg tror det er et timing problem. Jeg loader jo de scripts jeg skal bruge og så umiddelbart bagefter kalder jeg

<script type="text/javascript">     
        $(document).ready(function() {

            $("#iframe").fancybox({
                    'width'                : 800,
                    'height'            : 600,
                    'openEffect'        : 'fade',
                    'closeEffect'        : 'fade',
                    'openSpeed'        : 1500,
                    'closeSpeed'        : 1500,
                    'scrolling'        : 'no',
                    'type'                : 'iframe',
                    'overlayOpacity'    : '0.8',
                    'overlayColor'      : '#000',
                    'centerOnScroll'    : 'true'
            });
         
        }); 
    </script>

Hvordan kan jeg sikre at mine scripts er tilgængelige før jeg kalder $(document).ready(function() {

nogen idéer?

Ja, enten må du undlade at loade dem dynamisk, hvilket nok er et spørgsmål om en anden struktur - eller også må du spørge på, om funktionen/metoden er eksisterende, og evt. time dig ud af problemer med sen load (= masser af bøvl). I min verden skal der en ret stærk begrundelse til for at loade dem dynamisk  =)

Undlad i øvrigt kendte tagNames og metodenavne til ID'er - f.eks. "iframe". Det kan ofte resultere i problemer

PS: Hvorfor bruger du egentlig $(document).ready, hvis du loader disse scripts efter sideload?

Det gør jeg udelukkende fordi det er sådan det er beskrevet man skal gøre http://fancyapps.com/fancybox/#examples

Hvad er grunden til, du ikke ved sideload ved, hvilke scripts der skal bruges?

Grunden er at disse scripts ikke altid skal bruges, kun i nogle tilfælde. Kan jeg bruge noget andet end $(document).ready

Jeg forstår egenligt heller ikke hvorfor scripts ikke er loaded. Jeg kalder jo

<script type="text/javascript">isLoaded();</script>

før

$(document).ready

Jeg kan ikke se, der sker noget fra eller til ved at køre en funktion isLoaded (#15). Hvad gør den, hvis scriptet er (eller ikke er) loaded?

Har du nogen fordele ud af at loade disse scripts dynamisk? Hvad fylder de - og bruger du dem på andre sider, så brugeren allerede har dem i sin cache?

Det er meningen at den skal loade scriptet hvis det ikke allerede er loaded. Scriptene fylder 300 kb inkl JQuery 1.7. Mit problem er lidt at der bliver brugt en tidligere version af JQuery andre steder. Hvad sker der hvis man først har loaded 1.7 også senere loader 1.3.2?

Det lyder meget voldsomt. jQuery 1.7 fylder knap 92KB i den minimerede version (som du naturligvis bruger), så resten må være overordentlig omfangsrigt!

Så vidt jeg ved, er jQuery bagudkompatibelt, så der burde ikke være noget i vejen for at bruge version 1.7 over det hele.

På mobile enheder bør du dog helt klart overveje, om brugeren har ligeså stor glæde af animationer og overblændinger, som du har haft med at lave dem. Skal en mobil hente flere hundrede kilo JS, kan det tage minutter, før siden kan bruges. I den situation bliver (ligegyldig) funkyness en uudholdelig pine i nakken  *o)

Jeg havde brugt den ikke minimerede version men har nu skiftet. Jeg er i øvrigt gået bort fra at loade JQuery dynamisk. Nu har jeg selvfølgelig fået et nyt problem *SUK*

Hvad funker ikke for dig?

Det er noget med fancybox (2.0.1) hvor man nu tilsyneladende ikke kan lave grupper med forskellige effekter.

<script type="text/javascript">       
        $(document).ready(function() {
            $("#ident1").fancybox({
                    width            : <%=brede%>,
                    height            : <%=hojde%>,
                    openEffect        : 'fade',
                    closeEffect     : 'fade',
                    openSpeed      : 1500,
                    closeSpeed      : 1500,
                    scrolling      : 'no',
                    arrows          : 'true',
                    type            : 'iframe',
                    helpers    : {
                                title    : {
                                    type: 'outside'
                                },
                                overlay    : {
                                    opacity : 0.8,
                                    css : {
                                        'background-color' : '#000'
                                    }
                                },
                                thumbs    : {
                                    width    : 50,
                                    height    : 50
                                }
                            }       
            });       
        });   
</script>
<script type="text/javascript">       
        $(document).ready(function() {
            $("#ident2").fancybox({
                    width            : <%=brede%>,
                    height            : <%=hojde%>,
                    openEffect        : 'fade',
                    closeEffect     : 'fade',
                    openSpeed      : 1500,
                    closeSpeed      : 1500,
                    scrolling      : 'no',
                    arrows          : 'true',
                    type            : 'iframe',
                    helpers    : {
                                title    : {
                                    type: 'outside'
                                },
                                overlay    : {
                                    opacity : 0.8,
                                    css : {
                                        'background-color' : '#000'
                                    }
                                },
                                thumbs    : {
                                    width    : 50,
                                    height    : 50
                                }
                            }       
            });       
        });   
</script>

<a class="various fancybox.iframe" id="ident1" href="http://jquery.com/" rel="group">JQuery</a>
<a class="various fancybox.iframe" id="ident1" href="http://eb.dk/" rel="group">EB</a>
<a class="various fancybox.iframe" id="ident2" href="http://failblog.org/" rel="group">Failblog</a>

Nøøøhhh, men strengt taget kan man jo slet ikke bruge fancybox, da den kræver, man sætter en invalid rel attribut. På den anden side er det tydeligvis politisk ukorrekt at beklage sig over jQuery's utallige uhensigtsmæssigheder, så det har jeg efterhånden opgivet. Idéen om at overtale lemminger til at undlade at springe er dødfødt  *o)

Hvorfor er rel attributten invalid? Har du et bud på hvordan det kan løses

vil du have points eller skal jeg bare lukke :-)

Du lukker bare, ellers tak  =)

De umiddelbart valide værdier for rel attributten finder du her. Vil man bruge andre, bør der bruges en profile attribut på HEAD tagget

Derudover er brugen af rel attributten et tegn på et elendigt designpattern i en applikation (jQuery). Der sker nemlig det, at jQuery (eller rettere, den anvendte extension) på sideload traverserer alle sidens elementer, til den har fundet alle elementer med en bestemt rel attribut. Derefter kan jQuery gøre noget ved de pågældende elementer.

Dengang, da webudviklere gad at lære at skrive JavaScript, havde man en væsentligt bedre performende tilgang. Da pegede man - på sideload - selv de elementer, som skulle behandles, præcist ud.

Det gider man åbenbart ikke længere, så derfor ses ofte adskillige forskellige jQuery extensions på hver side - som hver især traverserer samtlige sidens elementer igennem.

JavaScript udvikling er i høj grad blevet overladt til mere eller mindre tilfældige udviklere, som skriver 'black-boxes', der (på overfladen) kan bruges af hvem somhelst. Det ses tydeligt på det faktum, at antallet af JS-fejl nærmest nærmest er eksploderet gennem de seneste 3-4 år. Det er idag umuligt at surfe med fejlmeddelelser slået til i IE - og laaaangt den overvejende del af fejlene stammer fra jQuery og andre black-boxes. Det er i mine øjne en kedelig udvikling.

oki. Tak for hjælpen