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>

ランダムな画像が選択されます。画像をクリックすると、新しい画像が読み込まれて表示されます。これには 1 ～ 2 秒かかる場合があります。ユーザーがクリックした後、次の画像が読み込まれるときに ajax-loader が表示されるようにします。私はこれが初めてで、さまざまなことを試しましたが、私が望む結果は何も得られません。助けてください、ありがとう。

4

3 に答える 3

1

まず、適切になるように、そのコードを次のコード (end script タグの前) に置き換えてください。

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

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 に答える
0

読み込みイメージをプリロードします。次に、ソースを直接新しいイメージに変更する代わりに、ローダーに変更してから、新しいイメージに変更します。これにより、ローダーがすぐに表示され (プリロードされているため)、準備が整うと新しいイメージが表示されます。

于 2012-12-22T04:35:14.987 に答える