3

現在、ウェブページのフォトギャラリーの作成に取り組んでいます。ページの読み込み後にJavascriptでプリロードしたい画像がたくさんあります。配列にHTMLリンクの非常に長いリストを含めるのではなく、forループを利用することは可能ですか？以下のコードをご覧ください。私がforループで間違っていることについての有益な洞察は、非常にありがたいです！ありがとうございました！！

<script type="text/javascript">
    function preloader() {
        var images = new Array()
        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image()
                images[i].src = preload.arguments[i]
            }
        }
        preload(
            var i=1;
            "http://example.com/images/gallery/elephants-" + for (i=1;i<=5;i++) {document.write(i);} + ".jpg",
            "http://example.com/images/gallery/penguins-" + for (i=1;i<=2;i++) {document.write(i);} + ".png"
        )
    }

    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
    addLoadEvent(preloader);
</script>

私が問題を抱えているのは、セクションのforループです。セクションはこれを出力/実行する必要がありますpreload()：preload()

preload(
    "http://example.com/images/gallery/elephants-1.jpg",
    "http://example.com/images/gallery/elephants-2.jpg",
    "http://example.com/images/gallery/elephants-3.jpg",
    "http://example.com/images/gallery/elephants-4.jpg",
    "http://example.com/images/gallery/elephants-5.jpg",
    "http://example.com/images/gallery/penguins-1.png",
    "http://example.com/images/gallery/penguins-2.png"
)
4

2 に答える 2

3

文字列とループを連結することはできません。ループとpushメソッドを使用して文字列の配列を作成する必要があります。

var i, urls = [];
for(i = 1; i <= 5; i++)
    urls.push('http://example.com/images/gallery/elephants-' + i + '.jpg');
for(i = 1; i <= 2; i++)
    urls.push('http://example.com/images/gallery/penguins-' + i + '.jpg');

次に、applyを使用してプリロード関数を呼び出し、その配列を引数として渡します。

preload.apply(null, urls);

したがって、プリローダー関数全体は次のようになります。

function preloader() {
    var images = new Array()
    function preload() {
        for (i = 0; i < preload.arguments.length; i++) {
            images[i] = new Image()
            images[i].src = preload.arguments[i]
        }
    }

    var i, urls = [];
    for(i = 1; i <= 5; i++)
        urls.push('http://example.com/images/gallery/elephants-' + i + '.jpg');
    for(i = 1; i <= 2; i++)
        urls.push('http://example.com/images/gallery/penguins-' + i + '.jpg');

    preload.apply(null, urls);
}
于 2012-05-06T02:34:36.150 に答える
0

引数がゼロのプリロード関数を定義しましたが、複数の引数をプリロード関数に渡そうとしています。さらに、必要なコンマの代わりにセミコロンを使用してパラメーターを区切ります。

これを実現するには、プリロード関数を変更して、関数に渡されるパラメーターの数に関係なく、反復できる単一の配列オブジェクトを取得することをお勧めします。以下は、関数定義の例です。

function preload(arr) {
    for(var i = 0; i < arr.length; i++) {
        var img = document.createElement("img");
        img.setAttribute("style","display:none");
        img.setAttribute("src",arr[i]);
        document.body.appendChild(img);
    }
}

この関数を使用するには、JavaScriptオブジェクト表記を使用してURLの配列をプリロード関数に渡し、配列を表します。

preload( 
    [ 
        "/images/first.png",
        "/images/second.png",
        "/images/third.png"
    ]
);

この配列には3つの文字列が含まれており、3つの文字列のそれぞれが個別の非表示の画像タグのsrc属性に渡されます。

私の特定の例に関する私の唯一の免責事項は、IEの特定のバージョンが隠し画像をキャッシュする場合としない場合があるということです。jQueryのようなライブラリとは対照的に、生のJavaScriptを使用する場合は常に、ソリューションが相互互換性があることを確認するために、すべてのブラウザーで徹底的にテストする必要があります。おそらく、関数を変更して正しいパラメーターを受け入れ、既存の手法を使用して画像をプリロードすることができます。これは、サポートする予定のすべてのブラウザーで機能することがわかっている、試行錯誤されたソリューションであると想定しています。

于 2012-05-06T02:36:52.537 に答える