从 Javascript 中删除 random() 输出答案

【问题标题】：Removing random() output from Javascript从 Javascript 中删除 random() 输出
【发布时间】：2011-08-16 09:53:35
【问题描述】：

我正在尝试使用基于 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 等。

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

【问题讨论】：

标签： php javascript jquery random

【解决方案1】：

我认为问题在于您仅在加载图像后才将图像附加到容器中，从而导致随机顺序确实取决于服务器负载以及首先加载的图像。第二次，从缓存中获取图像。

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

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

这也消除了您不想要的随机旋转。

【讨论】：

非常感谢影子向导 - 这就是问题所在，您的解决方案就像一个魅力！！！
干杯，我从未见过这样的代码行为（附加在.load() 事件中）所以我花了一些时间来解决这个问题。

【解决方案2】：

你不应该根据你想要的对服务器端的文件进行排序，让 jquery 做它的神奇之处在于一旦你删除了那里的随机调用..

【讨论】：