jQuery/JavaScript를 사용하여 폴더에서 이미지를 동적으로 로드하는 방법은 무엇입니까?

jQuery/JavaScript를 사용하여 폴더에서 동적으로 이미지 로드

이미지와 같은 자산을 로드하기 위해 폴더를 탐색하는 것은 이름이 잇달아 일어나는. 그러나 jQuery는 모든 디렉터리에서 이미지를 검색하고 표시하는 솔루션을 제공합니다.

해결책:

이 솔루션 구현에는 AJAX 호출을 활용하여 대상의 콘텐츠를 가져오는 작업이 포함됩니다. 폴더:

<code class="javascript">var folder = "images/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("body").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});</code>

이 접근 방식은 jQuery를 사용하여 AJAX 호출의 HTML 응답을 구문 분석합니다. 그런 다음 응답 내의 앵커 태그를 반복하여 지원되는 이미지 파일 확장자로 끝나는 태그만 필터링합니다. 마지막으로 검증된 이미지 경로를 DOM에 동적으로 추가합니다.

참고:

이 솔루션이 효과적으로 작동하려면 폴더 목록을 허용하도록 서버를 구성하는 것이 중요합니다. . Apache 서버에서는 "인덱스" 옵션을 활성화해야 합니다. Express.js 및 Node.js의 경우 "serve-index"라는 외부 패키지를 활용하여 동일한 기능을 구현할 수 있습니다.

위 내용은 jQuery/JavaScript를 사용하여 폴더에서 이미지를 동적으로 로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!