Question

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

以下是头标记。

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。我是新手，我尝试了各种各样的东西，但没有什么能给我我想要的结果。请帮忙，谢谢。

Answer 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];
}

Answer 2

预加载加载图片。然后，不是将源直接更改为新图像，而是将其更改为加载程序，然后将其更改为新图像。这将导致加载程序立即显示（因为它已预加载），然后新图像将在准备就绪时显示。

Answer 3

虽然在您的示例代码中找不到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); }
                });
            }

Javascript - 加载gif出现

3 个答案: