Guten Tag miteinander
ich habe mich am Wochenende mit Ajax versucht.
Mein Versuch soll folgendes machen:
- Beliebige Anzahl Bilder laden
- Gleichmässig verteilen (Gallerie)
- Während des Ladens des jeweiligen Bildes eine Animation anzeigen
Problem:
- Das Lade-Bild wir vor erscheinen des „richtigen“ Bildes nicht angezeigt.
- Irgendwas stimmt wohl mit der „Austausch-Funktion“, Zeile 52 nicht…
Könnte mir jemand helfen? Was mache ich falsch?
Den Code kann man ein einfach in eine HTML Datei kopieren.
Grüsse
Oli
Ajax Test
// JavaScript Code
// loading image here
var arr = new Array();
// Create array for testing
for (var a = 0; a < 10; a++) {
arr[a] = new Array();
arr[a][„URL“] = „www“ + a;
arr[a][„IMG“] = „http://www2.bmw.de/module/emag/grosskunden_032011/mo…“ + a + „.jpg“;
arr[a][„USR“] = „usr“ + a;
arr[a][„AGE“] = a;
}
var length = arr.length,
element = null;
// JQUERY Code
$(document).ready(function(){
// for each element of array
for (var i = 0; i < length; i++) {
// Create a frame
$("#frame").append("<div style=„float:left; width:200px; height:200px; border:1px solid #e5e5e5; background:#ffffff; padding-top:2px; padding-bottom:2px; margin:4px;“ id=„cntnt“ + i + „“></div");
// append content to frame
$("#cntnt" + i).append(i + „) URL: " + arr[i][„URL“]);
$(“#cntnt" + i).append("<div id=„image_frame“ + i + „“><img id=„image“ + i + „“ style=„width:200px; height:150px;“ title="" + arr[i][„USR“] + „„src=““ + arr[i][„IMG“] + „“></div>");
$("#cntnt" + i).append("<br>" + i + „) USR: " + arr[i][„USR“] + " (“ + arr[i][„AGE“] + „)“);
// init loading adnimation
// exchange loading.gif by a local file for performance reason
var loader = "<img src=„http://alexneil.co.uk/resources/headfoot/TV4-4W8Q/15…“ id=„loaderimg“ + i + „“ alt=„loading…“/ style="position:absolute; „>“;
// hide the picture that shall be received
$("#image" + i).hide();
// display the loading adnimation
$("#image_frame" + i).append(loader);
// append the function to exchange loading animation with picture after loading
$("#image_frame" + i + " img").append(function() {
$("#loaderimg" + i).hide();
$("#image" + i).fadeIn(‚slow‘);
});
}
});
<!-- /* CSS */
body {
font: 11px Arial;
}
#frame {
float: left;
background: #ffffff;
border: 0px solid #e5e5e5;
}
–>