PHPとjQueryを使用して画像をプリロードする - コンマ区切りの配列ですか？

Question

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

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

例えば、私はそれで、このPHPとDIVを持っているでしょう：

PHPでこの関数を呼び出します

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

：

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を渡すより良い方法はありますか？または一般的にはより良い方法ですか？

Answer 1

あなたは配列にdeliminatorのコンマで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(); 
     }); 
}); 

注意していることあなたはdata-attributeに異なるURLを区切るカンマ以外のものを持つべきではありません。

<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> 

Answer 2

あなたは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); 
} 

Answer 3

あなたのPHPが[]に包まれた実際の配列としての要素にデータを返すことを確認します。次に、.data（）メソッドを使用してデータ属性からデータを取り出すと、jqueryはそれを実際の配列に変換します。

のdiv

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

コード

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