동적 자바 스크립트 슬라이드 쇼

Question

MySQL 데이터베이스에서 이미지를 사전로드 한 다음 HTML 문서의 이미지 태그에 한 번에 하나씩 표시하는 JavaScript 슬라이드 쇼가 있습니다. 간단히 말해서, 많은 슬라이드 쇼 튜토리얼이 웹에서 보여주는 것과 같은 이미지를 미리로드하여이를 달성하지만, 정적 이미지 (예 : Image/Image1.jpg 등)를 사용하는 대신 PHP (예 : getData.php? n을 통해 제공된 동적 이미지를 사용합니다. = 1) getData.php 스크립트는 서버에서 실행되며 사전로드 된 모든 이미지에 대해 데이터베이스에 대한 새로운 연결을 엽니 다.

어쨌든 데이터베이스에 너무 많은 연결을 피하고 각 연결이 제한 n, 1 인 이미지 데이터베이스에서 단일 쿼리 만 만들어주는 것이 있습니까?

getData.php를 image.src로 사용하려면 getData.php를 한 번에 단일 이미지를 반환해야합니다! 나는 10의 블록으로 가져간 다음 클라이언트 측에서 이미지 () 객체에 하나씩 할당하고 싶습니다. Python에 클라이언트 앱을 작성하여 이미지 (물론 브라우저 외부) 10 정도의 블록을 훨씬 더 빠르게 전송하고 MySQL 서버의 부하를 줄이기 때문에 이것이 더 빠를 것이라고 생각합니다. JavaScript와 PHP로 이것을 달성 할 수 있습니까? 사이에 XML을 사용합니까? 이진 이미지 데이터를 Ajax와 함께 JavaScript로 가져올 수 있다면 무엇이든 할 수 있습니까? 거기가 있습니까? imagecreatefromstring() 내가 놓친 JavaScript 기능?

정확한 코드를 스스로 알아낼 수 있지만 웹 프로그래밍을 처음 사용 하고이 문제를 해결하는 방법에 대한 팁이 필요합니다! 나는 주요 프레임 워크의 일부를 놓치고 있다고 생각합니다. 이 문제에 대해 ActionScript 또는 JavaScript 이외의 것이 필요합니까? 미리 팁에 감사드립니다!

편집 : 나는이 첫 번째 제안을 좋아하고 그것을 끝낼 수 있다고 생각합니다. 또한 제한 N, 1 쿼리를 피하기 위해 Alex Shishkin의 제안의 일부 (SQL Blob 필드를 유지하고 싶지만) XML의 바이너리 데이터를 JavaScript의 image () 객체에 어떻게 고수합니까?

Answer 1

내가 말할 것:

• getData.php에 다음 10 개의 이미지가 포함 된 XML 파일을 생성하도록하십시오.
• ajax-request에서 getData.php로 XML 응답을 얻는 JavaScript가 있습니다.
• XML 응답의 이미지를 하나씩 가로 지르고 9 번째 이미지가 다음 이미지 세트에 대해 getData.php를 표시 할 때.

프레임 워크의 경우 : 제 조언은 ajax 요청과 이미지 디스플레이 및 사전 로딩 모두에 jQuery를 사용하는 것입니다.

---

Base64와 같은 바이너리-텍스트 인코딩을 사용하여 XML을 통해 이진 데이터를 전달할 수 있습니다. 대부분의 브라우저에서 Base64 디코딩 자체를 사용하여 다음과 같은 이미지 객체로 전달할 수 있습니다.

<img src="data:image/jpeg;base64,your binary data comes here">

이것은 인터넷 익스플로러를 제외한 모든 것에서 작동합니다. 깔끔한 트릭 Dean Edwards는 Base64 데이터를 IE의 PHP 모듈로 전달합니다. :)

간단한 이미지 (슬라이드 쇼 없음 ... 이것은 내 테스트 코드 일뿐)에 jQuery 및 PHP를 사용하여 코드는 다음과 같습니다.

PHP :

<?php
   echo base64_encode(file_get_contents("image.jpg"));
?>

JS / JQuery :

$(document).ready( function() {
   $.get( "image.php", function( data ) {
      $(document).append("<img src=\"data:image/jpeg;base64,"+ data +"\">");
   });
});

Answer 2

이진 이미지와 "Limit N, 1" - 매우 나쁜 솔루션 사용.

이미지에 대한 링크로 이미지가 데이터베이스에 저장되지 않은 이유는 무엇입니까? 이미지는 파일 시스템에 저장해야합니다. "Limit N, 1"과 같은 쿼리는 특히 큰 테이블에서 매우 느립니다. JavaScript로 전송하기 위해 작은 오프셋이있는 많은 쿼리와 PHP의 팩 데이터를 JSON 형식으로 팩 데이터를 팩으로 팩으로 사용하는 작은 쿼리를 사용해야합니다. (예 : 100 제한) Ajax 요청을 하나의 이미지에 대해 매우 신중하게 보냅니다.

여기에서 찾을 수있는 멋진 슬라이드 쇼 -Flugins.jquery.com.

Answer 3

1. 웹 페이지를 만듭니다.
2. 페이지가 서버에 연결하고 이미지의 ID를 사용하여 XML 또는 JSON을 가져옵니다.
3. 2 단계에서 ID를 사용하여 서버에서 이미지를 요청하십시오.