Javascript - 出现正在加载 gif

标签 javascript html image loader

我有一个页面,其中使用 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。我是新手,我尝试过各种方法,但没有任何东西能给我想要的结果。请帮忙,谢谢。

最佳答案

首先,请将该代码替换为以下代码(在结束脚本标记之前),以使其正确无误:

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

关于Javascript - 出现正在加载 gif,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14000062/

相关文章:

html - Bootstrap 3 站点上的 XS-6 列在移动设备上保持堆叠

javascript - 覆盖两侧的图像

php - 输入中一个名称的两个值

java - PaintComponent 未被调用,无法使图像变量起作用

javascript - 有什么方法可以增加 dygraph 中图形和范围选择器之间的差距吗?

javascript - 初始化空表单中断页面; knockout

html - 如何创建支持跨浏览器的半实心、半透明渐变背景图像?

delphi - JPEG-LS/LOCO-I 压缩库

javascript - Angular Js - TypeError : Object doesn't support property or method "includes"

javascript - 如何在 VueJS 生命周期钩子(Hook)中设置数据