jQuery: loading animation not loading - help understanding load.function

noviceiii · September 17, 2013

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>

Sign In

jQuery: loading animation not loading - help understanding load.function

Recommended Posts

noviceiii

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information