Removing random() output from Javascript

I am trying to use a jQuery based Photo Stack which uses the following codes:

$ps_albums.children('div').bind('click',function(){
    var $elem = $(this);
    var album_name = 'album' + parseInt($elem.index() + 1);
    //alert(album_name);
    var $loading     = $('<div />',{className:'loading'}); 
    $elem.append($loading);
    $ps_container.find('img').remove();
    $.get('corrective.php', {album_name:album_name} , function(data) {
        var items_count    = data.length;
        for(var i = 0; i < items_count; ++i) {
            var item_source = data[i];
            //alert(item_source);
            var cnt = 0;
            $('<img />').load(function(){
                var $image = $(this);
                ++cnt;
                resizeCenterImage($image);
                $ps_container.append($image);
                var r = Math.floor(Math.random()*41)-20;
                if(cnt < items_count) {
                    $image.css({
                        '-moz-transform'    :'rotate('+r+'deg)',
                        '-webkit-transform'    :'rotate('+r+'deg)',
                        'transform'            :'rotate('+r+'deg)'
                    });
                }
                if(cnt == items_count){
                    $loading.remove();
                    $ps_container.show();
                    $ps_close.show();
                    $ps_overlay.show();
                }
            }).attr('src',item_source);
        }
    },'json');
});

The coorective.php is as follows:

$location   = 'corrective';
$album_name = $_GET['album_name'];
$files      = glob($location . '/' . $album_name . '/*.{jpg,gif,png}', GLOB_BRACE);
$encoded    = json_encode($files);
echo $encoded;
unset($encoded)开发者_StackOverflow中文版;

The above javascript code shows images from the album in random order which is probably triggered by the line:

var r = Math.floor(Math.random()*41)-20;

I have changed this to:

var r = "";

Now, when the images are loaded for the first time, they are still displaying in random orders but one the second load they follow a sequential display e.g. 0001.jpg, 0002.jpg, 0003.jpg and so on.

How can I display the sequential order every time the images are loaded - even the first time?

I think the problem is the fact you append the image to the container only after is was loaded, resulting in random order indeed depending on server load and what image finished to load first. The second time, images are taken from cache.

To fix this, change this whole block of code:

$('<img />').load(function(){
    var $image = $(this);
    ++cnt;
    resizeCenterImage($image);
    $ps_container.append($image);
    var r = Math.floor(Math.random()*41)-20;
    if(cnt < items_count) {
        $image.css({
            '-moz-transform':'rotate('+r+'deg)',
            '-webkit-transform':'rotate('+r+'deg)',
            'transform':'rotate('+r+'deg)'
        });
    }
    if(cnt == items_count){
        $loading.remove();
        $ps_container.show();
        $ps_close.show();
        $ps_overlay.show();
    }
}).attr('src',item_source);

To this instead:

var $image = $('<img />').attr('src',item_source);
$ps_container.append($image);
$image.load(function() {
    var $image = $(this);
    ++cnt;
    resizeCenterImage($image);
    if(cnt == items_count){
        $loading.remove();
        $ps_container.show();
        $ps_close.show();
        $ps_overlay.show();
    }
});

This also removed the random rotation that you don't want.

Shouldn't you be sorting the files on the server side according to what you want and let jquery do it's magic that is once you remove the random call in there..