2

そこで、マウスホバーで多くのアニメーションGIFを使用するWebサイトを構築しています。たくさんの画像がありますが、特定のページで使用される画像のみをロードしたいと思います。WordPressを使用しているので、条件付きタグを使用して、特定のページに必要な画像のURLのみを出力できます。

私の問題は、どの画像をプリロードする必要があるかをブラウザ/サーバーに伝える方法でした。含む要素にHTML5データ属性を追加することにしました。

たとえば、このPHPを含むDIVがあります。

<div id="home-container" class="preload" data-preload="<?php echo preloadImages(); ?>"></div>

PHPでこの関数を呼び出すのは次のとおりです。

function preloadImages() {
    global $post;
    $templateURL = get_template_directory_uri();
    $images = array();

    if( is_page('test') )
        $images[] = "'".$templateURL."/images/gifs-static/button-info-tab-close-off.gif'";
        $images[] = "'".$templateURL."/images/gifs-animated/button-info-tab-close.gif'";
    }

    return implode(", ", $images);
}

したがって、出力は次のようになります。

<div id="home-container" class="preload" data-preload="'http://example.com/images/gifs-static/button-info-tab-close-off.gif', 'http://example.com/images/gifs-animated/button-info-tab-close.gif'"></div>

そして、このJavaScriptを実行します。

jQuery('.preload').each(function(){

        var images = [
            // Comma separated list
            jQuery(this).data('preload')
        ];

        jQuery(images).each(function() {
            jQuery('<img />').attr('src', this).addClass('preloaded').appendTo('body').hide();
        });
});

問題は、JavaScriptがコンマ区切りのリストを好まないことです。URLを書き込むだけで、問題なく動作します。では、これらのURLを渡すためのより良い方法はありますか？または一般的に良い方法ですか？

4

3 に答える 3

3

URL の文字列をデリミネーターのカンマで分割して配列にする必要があります。

    var images = jQuery(this).data('preload').split(',');

jQuery(this).data('preload')は文字列を返します。.split()その文字列を配列に分割するために使用できます: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/Split

また、次を使用して、ループを少し速く実行できます$.each()。

jQuery('.preload').each(function(){

        var images = [
            // Comma seperated list
            jQuery(this).data('preload')
        ];

        jQuery.each(images, function() {
            jQuery('<img />').attr('src', this).addClass('preloaded').appendTo('body').hide();
        });
});

内の異なる URL を区切るコンマ以外は何も含めないでくださいdata-attribute。

<div id="home-container" class="preload" data-preload="http://example.com/images/gifs-static/button-info-tab-close-off.gif,http://example.com/images/gifs-animated/button-info-tab-close.gif"></div>
于 2012-01-30T21:53:14.037 に答える
1

リストを Js 配列に直接入れてみませんか?

何かのようなもの ：

<script>
    var aPreloadImages = <?php echo preloadImages(); ?>;

    for (index in aPreloadImages) {
        jQuery('<img />').attr('src', aPreloadImages[index]).addClass('preloaded').appendTo('body').hide();
    }
</script>

そしてあなたのPHPコード：

function preloadImages() {
    global $post;
    $templateURL = get_template_directory_uri();
    $images = array();

    if( is_page('test') )
        $images[] = "'".$templateURL."/images/gifs-static/button-info-tab-close-off.gif'";
        $images[] = "'".$templateURL."/images/gifs-animated/button-info-tab-close.gif'";
    }

    return json_encode($images);
}
于 2012-01-30T21:54:44.607 に答える
1

あなたのphpが実際の配列として要素にデータを返すようにし、[]. 次に、.data() メソッドを使用して data 属性から取得すると、jquery はそれを実際の配列に変換します。

分周

<div class="preload" data-preload='["foo.jpg","bar.jpg","foobar.gif","barfoo.png"]'></div>

コード

var images = jQuery(this).data('preload');
于 2012-01-30T21:58:22.987 に答える