[SweLogan]

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>

[Nerix]

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

[x264]

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

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

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

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

}, errorCallback);

eller om du vill ha

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.

[Nerix]

Ursprungligen postat av x264

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

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

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

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

}, errorCallback);

eller om du vill ha

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.

[x264]

Ursprungligen postat av Nerix

Å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?