Javascript - 加载gif出现

我有一个页面，随机图像使用JavaScript函数加载。Javascript - 加载gif出现

以下是头标签。

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在用户点击后下载图片时出现。我是新来的，我尝试了各种各样的东西，但没有给我我想要的结果。请帮忙，谢谢。

来源

2012-12-22 user1922991

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

来源

2012-12-22 04:35:14

首先，请替换为以下（之前结束脚本标签）的代码，所以它是正确的：

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-22 04:42:19

感谢您的回复。我有点困惑，我应该用你提供的代码替换头标中的所有javascript？顺便说一句，我使用101图像，各种JPG GIF和PNG文件。由于显而易见的原因，我只在我的OP中放入了9。 – user1922991

OH。那么，希望你能阅读我写的脚本。但是，如果它是图像的随机扩展名，也许我的编辑将无法帮助...有那么多图像。 –

该脚本写得很差。不要忘记分号。而且，对象用程序化的括号表示来实例化。 ref：new Array（WTF？）。 –

的回答，虽然阿贾克斯装载机是无处可在您的示例代码中可以找到，是以下内容：

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-22 05:08:23

我应该注意到loadingImgTag引用了Kolink提到的响应。预先加载图像，然后在ajax调用之前始终显示它以加载新图像。 –

有趣的是，即使OP在他们的问题中没有使用它或提到它，但“明显的答案”包括使用jQuery。显然，我一定错过了备忘录。 – newfurniturey

它也很有趣，这里没有代码使用“ajax loader”。而且，现在有95％的Web应用程序都使用jQuery，所以我做了一个假设...希望它不是不适当的。 –

Javascript - 加载gif出现

回答

相关问题