Поэтому я создаю сайт, который будет использовать много анимированных 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-адреса? Или лучший способ вообще?
Вам нужно разбить строку URL-адресов запятыми разделителями на массив:
var images = jQuery(this).data('preload').split(',');
jQuery(this).data('preload') возвращает строку, и вы можете использовать .split() для разделения этой строки на массив: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/ Строка / 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>
Почему бы вам не поместить список непосредственно в массив 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); }
Сделайте ваш php вернет данные в элемент как фактический массив, завернутый в [] . Затем, когда вы извлекаете его из атрибута data с помощью метода .data (), jquery преобразует его в реальный массив.
ДИВ
<div class="preload" data-preload='["foo.jpg","bar.jpg","foobar.gif","barfoo.png"]'></div>
код
var images = jQuery(this).data('preload');