Question

我正在尝试使用基于jQuery的Photo Stack，它使用以下代码：

$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');
});

coorective.php如下：

$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);

上面的javascript代码以随机顺序显示来自相册的图片，这可能是由以下行触发的：

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

我已将此更改为：

var r = "";

现在，当第一次加载图像时，它们仍然以随机顺序显示，但是第二次加载时它们遵循顺序显示，例如0001.jpg，0002.jpg，0003.jpg等。

每次加载图像时如何显示连续顺序 - 即使是第一次？

Answer 1

你不应该根据你想要的方式对服务器端的文件进行排序，让jquery在你那里删除随机调用时做出神奇的魔力。

Answer 2

我认为问题在于，只有在加载后才将图像附加到容器中，从而导致随机顺序，具体取决于服务器负载和首先加载的图像。第二次，图像来自缓存。

要解决此问题，请更改整个代码块：

$('<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);

改为：

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();
    }
});

这也删除了你不想要的随机旋转。

从Javascript中删除random（）输出

2 个答案: