noviceiii
-
Posts
1 -
Joined
-
Last visited
noviceiii's Achievements
Newbie (1/5)
0
Reputation
-
Dear all I feel a bit strange to ask in a PHP forum for jQuery help. However, as you offer it, I give it a try. I've made my first steps into jQuery. My script should - have n pictures in an array - display a loading animation while loading the main image Problem: - Loading animation does not appear - I guess it is due to line 42 > $('.image_frame' + i + ' img').load(function() <. It proceeds with the highest value of integer i (3 in this example). - This I guess, is because it is only executed when everything is loaded. - If so, my understanding is wrong of the load function of jQuery: I was expecting it to be assigned to each .image_frame img. I am now stuck on how to get arround that. May I ask for a little help? Oliver Please see below full script. Just copy/ past into an HTML for testing. Mind to have a loading.gif localy. <!DOCTYPE html> <html> <head>Test</head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> // init variables var arr = new Array(); // Create array for testing for (var a = 1; a < 3; a++) { arr[a] = new Array(); arr[a]["URL"] = "www" + a; arr[a]["IMG"] = "http://www2.bmw.de/module/emag/grosskunden_032011/mount/pages/" + a + ".jpg"; arr[a]["USR"] = "usr" + a; arr[a]["AGE"] = a; } var length = arr.length, element = null; $(document).ready(function() { console.log('Document ready function'); for (var i = 1; i < length; i++) { console.log('For loop round ' + i + '. Max. ' + length); var pic = arr[i]["IMG"]; $(".wrap").append("<div class=\"image_frame" + i +"\"><a href=\""+arr[i]["URL"]+"\"><img src=\""+pic+"\" width=\"240\" height=\"160\" class=\"image" + i +"\" alt=\"" + i +"\"></a></div>"); var loader = "<img src=\"loading.gif\" class=\"loaderimg"+i+"\" alt=\"Load…\" />"; // hide original pic $('.image' + i).hide(); //add loading animaiton $('.image_frame' + i).append(loader); $('.image_frame' + i + ' img').load(function() { console.log('Image loaded: ' + i); $('.loaderimg' + i).hide(); $('.image' + i).fadeIn('slow'); }); } }); </script> <style type="text/css"> .wrap { float: left; width: 100%; padding: 30px 0 0 30px; margin: 0 auto; clear: left; } h1 { margin-bottom: 30px; } </style> <body> <div class="wrap"> <h1>Images</h1> <!-- STRUCTURE --- <div class="image_frame"> <a href="http://xxxx"> <img src="http://xxxx.jpg" width="240" height="160" class="image" alt="" /> </a> </div> --> </div> </body> </html>