PHP 및 jQuery를 사용하여 이미지 미리로드 - 쉼표로 구분 된 배열?

Question

그래서 마우스를 움직일 때 많은 애니메이션 GIF를 사용할 웹 사이트를 만들고 있습니다. 많은 이미지가있을 것이며 특정 페이지에서 사용될 이미지 만로드하려고합니다. WordPress를 사용하기 때문에 조건 태그를 사용하여 특정 페이지에 필요한 이미지의 URL 만 출력 할 수 있습니다.

내 문제는 미리로드해야하는 이미지를 브라우저/서버에 알려주는 방법이었습니다. HTML5 데이터 속성을 포함하는 요소에 추가하기로 결정했습니다. 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); 
} 

그래서 출력이 될 것이다 :

예를 들어, 나는이 PHP와 DIV있을 것입니다

<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의 문자열을 분할해야합니다

jQuery(this).data('preload')

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

문자열을 반환, 당신은 배열로 해당 문자열을 분할 .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(); 
     }); 
}); 

주를이

<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 배열에 직접 목록을 넣지 마십시오 : 당신은 data-attribute에 다른 URL을 구분 쉼표 이외의 아무것도하지해야합니까? 같은

뭔가 :

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

코드

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