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

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

2 голосов
/ 31 января 2012

Итак, я создаю веб-сайт, который будет использовать множество анимированных 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?Или вообще лучше?

Ответы [ 3 ]

3 голосов
/ 31 января 2012

Вам нужно разбить строку 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>
1 голос
/ 31 января 2012

Заставьте ваш php вернуть данные элементу в виде фактического массива, завернутого в []. Затем, когда вы извлекаете его из атрибута данных с помощью метода .data (), jquery преобразует его в реальный массив.

DIV 

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

код 

var images = jQuery(this).data('preload');
1 голос
/ 31 января 2012

Почему бы вам не поместить список непосредственно в массив 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);
}
...