2

我有一个使用 javascript 函数加载随机图像的页面。

以下是在 head 标签中。

function pickimg(){ 
var imagenumber = 101 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images = new Array
images[1] = "images/1.jpg"
images[2] = "images/2.gif"
images[3] = "images/3.jpg"
images[4] = "images/4.jpg"
images[5] = "images/5.gif"
images[6] = "images/6.jpg"
images[7] = "images/7.jpg"
images[8] = "images/8.jpg"
images[9] = "images/9.jpg"
var image = images[rand1]
document.randimg.src = image
}
</script>

然后在体内：

<body onLoad="pickimg()">
<a href="" onClick="pickimg();return false;"><IMG SRC="images/ajax-loader.gif"     name="randimg" border=0></a>

随机选择一张图片。当您单击图像时，会加载一个新图像，然后显示。这可能需要一两秒钟。我希望在用户单击后，在加载下一个图像时出现 ajax-loader。我对此很陌生，我尝试了各种各样的东西，但没有任何东西能给我我想要的结果。请帮忙，谢谢。

4

3 回答 3

1

首先，请将该代码替换为以下代码（在结束脚本标记之前），以使其正确：

function pickimg(){ 
   var imagenumber = 101, ext,
        images = new Array(10), i=0,
        randomnumber = Math.random(),
        rand1 = 1 + Math.round((imagenumber-1) * randomnumber);
    while (++i<10) {
        ext = (i===2||i===5)? ".gif" : ".jpg";
        images[i] = "images/"+ i + ext;
    }
    document.randimg.src = images[rand1];
}
于 2012-12-22T04:42:19.893 回答
0

预加载加载图像。然后不是直接将源更改为新图像，而是将其更改为加载器，然后将其更改为新图像。这将导致加载器立即显示（因为它是预加载的），然后新图像将在它准备好时出现。

于 2012-12-22T04:35:14.987 回答
0

尽管在您的示例代码中找不到 Ajax 加载程序，但答案如下：

getImage: function(fn){
                var url = "/apps/blah/imgpath/",
                    $imgContentContainer = $("myselector");
                $imgContentContainer.html(loadingImgTag);
                $.ajax({
                    async: false,
                    url: url + fn,
                    success: function(d){ $imgContentContainer.html(theAjaxLoadedImg); }
                });
            }
于 2012-12-22T05:08:23.967 回答