Предварительная загрузка изображений с использованием PHP и jQuery - массив с разделителями-запятыми?

Question

Итак, я создаю сайт, который будет использовать много анимированных GIF при наведении мыши. Будет много изображений, и я хочу только загрузить изображения, которые будут использоваться на любой заданной странице. Он использует WordPress, поэтому я могу использовать условные теги, чтобы выставлять только URL-адреса изображений, которые мне нужны на определенной странице.

Моя проблема заключалась в том, как сообщить браузеру/серверу, какие изображения нужно предварительно загрузить. Я решил добавить атрибут данных HTML5 к содержащемуся элементу.

К примеру, я бы DIV с этим PHP в нем:

<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-адреса? Или лучший способ вообще?

Answer 1

Вы должны разделить строку URL, по deliminator запятыми в массив:

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:

<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 с помощью метода .data(), jquery преобразует его в реальный массив.

ДИВ

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

код

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