WN - Asynchronous Script Loading

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Asynchronous Script Loading (https://www.wn.se/forum/showthread.php?t=1065553)

Asynchronous Script Loading

Har googlat runt en del nu på "Asynchronous Script Loading" har hittat en del men inte redigt vilket som är "best practice" just nu.

Sen en annan sak jag inte hittat eller vet vad det kallas är javascriptet man laddar in. Hur skriver man en init function i den så de kan skicka variablar mellan varandra och styra DOM object.

Det jag vill åstakomma är att den ska ladda in ett bildgalleri i ett DOM object från ett visst ID i databasen.

Exempel

<script>
window.fbAsyncInit = function() {
FB.init({
appId : '760091084023362',
xfbml : true,
version : 'v2.4'
});
};

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

head.js har funnits ett tag å anses vara stabil.

Rätt stor fil för att göra något så simpelt... typ såhär:

Kod:

function loadJS(src, callback) {

        var scriptFile = document.createElement("script");

        scriptFile.type = "text/javascript";

        scriptFile.src = src;

        scriptFile.onload = scriptFile.onreadystatechange = function() {

                if ((!this.readyState ||

                        this.readyState === "loaded" || 

                        this.readyState === "complete")) {

                        // Hanterar minnesläcka i IE

                        scriptFile.onload = scriptFile.onreadystatechange = null;

                        callback();

                }

        };

        document.getElementsByTagName("head")[0].appendChild(scriptFile);

};

Sedan kan du bara göra

Kod:

loadJS("gallery.js", function() {

   // filen har laddats

});

Och så går det att slänga in en som hanterar error, hur du vill göra det om du föredrar

Kod:

loadJS("gallery.js", function() {



}, errorCallback);

eller om du vill ha

Kod:

loadJS("gallery.js", function(err) {



});

Är ju upp till dig.

Men callbacken i elementet är iaf onerror, så då kan du ju lägga till det.

Citat:

Ursprungligen postat av x264 (Inlägg 20512903)

Rätt stor fil för att göra något så simpelt... typ såhär:

Kod:

function loadJS(src, callback) {

        var scriptFile = document.createElement("script");

        scriptFile.type = "text/javascript";

        scriptFile.src = src;

        scriptFile.onload = scriptFile.onreadystatechange = function() {

                if ((!this.readyState ||

                        this.readyState === "loaded" || 

                        this.readyState === "complete")) {

                        // Hanterar minnesläcka i IE

                        scriptFile.onload = scriptFile.onreadystatechange = null;

                        callback();

                }

        };

        document.getElementsByTagName("head")[0].appendChild(scriptFile);

};

Sedan kan du bara göra

Kod:

loadJS("gallery.js", function() {

   // filen har laddats

});

Och så går det att slänga in en som hanterar error, hur du vill göra det om du föredrar

Kod:

loadJS("gallery.js", function() {



}, errorCallback);

eller om du vill ha

Kod:

loadJS("gallery.js", function(err) {



});

Är ju upp till dig.

Men callbacken i elementet är iaf onerror, så då kan du ju lägga till det.

Återkom när du testkört koden i alla webbläsare och fixat till alla buggar.

Citat:

Ursprungligen postat av Nerix (Inlägg 20512906)

Återkom när du testkört koden i alla webbläsare och fixat till alla buggar.

Testkört i IE10 -> IE 5, Firefox, Opera och Chrome.

Fungerar utmärkt i alla.

Upplever du någon bugg?