여기에 가능한 한 자세히 설명하려고합니다.PHP/AJAX/JSON/jQuery를 통해로드 된 동적 이미지 캐싱
관리자가 폴더를 만들고 해당 폴더에 사진을 업로드 할 수 있습니다. 디스플레이는 Pinterest의 디스플레이와 유사합니다. Pinterest는 한 화면에 콜라주의 모든 사진을로드합니다. 거기에 5-6 장의 사진 만 있으면 완벽하게 작동하지만 거의 작동하지 않습니다. 일단 더 많은 사진을 찍기 시작하면 더 느리게 시작됩니다. 다른 하나는 그림을 삭제하거나 해당 폴더를 다시 입력 할 때마다 전체 디스플레이가 다시로드되어야한다는 것입니다. 이러한 이미지를 캐싱 할 방법이 필요합니다. homepageActions.js 및 fileManager.js :
dashboard.php에서 두 개의 자바 스크립트가 포함되어 있습니다 : 여기
homepageActions.js에는
document.ready() 스크립트가 있으며이 스크립트는 자바 스크립트 함수
showFiles()을 호출합니다.
기본적으로 문서가로드 되 자마자 조금 더 간결하게하려면 showFiles() 함수가 호출됩니다. 그 함수는 다음과 같습니다 :
function showFiles(directoryName) {
$.ajax({
url: 'displayRecords.php',
type: 'post',
data: ({directoryName:directoryName}),
dataType: 'json',
success: function(data) {
constructTable(data);
$(document).find("a[rel*='lightbox']").lightBox();
}
});
}
이 함수에는 폴더 경로가 전달됩니다. 그곳에서 AJAX 스크립트는 해당 폴더를 찾는 PHP 스크립트를 호출하고 해당 폴더의 모든 디렉토리와 이미지 목록을 가져옵니다. 그런 다음 원래 전달 된 폴더의 각 하위 폴더와 이미지의 세부 정보가 들어있는 JSON 문자열을 구성합니다. 스크립트가 성공적으로 반환되면 JSON 문자열을 함수에 전달하는 constructTable(data)이라는 다른 함수가 호출됩니다.
여기에 약간 털이 많습니다.
constructTable() 함수에는 약 240 줄의 코드가 있으며 여기에는 포함되지 않으므로 따르기가 어렵습니다. 요약하자면이 함수는 JSON 문자열을 파싱하여 어떤 항목이 디렉토리이고 어떤 항목이 파일인지를 계산합니다. 그것은 두 개의 배열을 만듭니다 : 폴더의 배열과 파일의 배열.
먼저 모든 폴더를 처리하고 적절하게 표시합니다. 이 부분은 괜찮 았고 걱정이 없습니다.
그러나 그 후에는 이미지를 살펴보기 시작합니다. 각 이미지에 대해 기본적으로 많은 코드를 작성하고 있습니다. 각 이미지를 둘러싼 div, 링크 및 기타 HTML 마크 업이 있습니다. 그러나 짧게 말하면 간단히 말해서 각 파일 경로 (JSON에서 수집 한)를 보는 for ... next 루프가 있으며, HTML의 긴 문자열을 구성한 다음 jQuery를 사용하여 DIV에 추가합니다. 그것은 궁극적 이런 걸보고 끝나는 그래서 : 이제
for (var a = 0; a < numPhotos; a++) {
photoCode += "<div id='outside-container-"+a+"'>";
photoCode += "<a rel='lightbox' class='photo-link' href='"++"'>";
photoCode += "<img src='http://" + rootURL + "/uploads/"+fileNameArray[a] + "' width='200' class='photo-thumb'/></a>";
photoCode += "</div>";
$("#column1").append(photoCode);
}
을 - 나는 이전에 폴더에있는 사진 만 몇이있을 때, 말했듯이, 이것은 문제가되지 않습니다. 그러나 우리가 더 높은 숫자로 들어가기 시작하면 문제가됩니다. 그래서 - 그런 말로,이 사진을 브라우저 캐시에 저장할 수있는 방법이 있습니까? 그래서 초기로드 후에 훨씬 빨리로드됩니다.
은 느려지거나 이미지가로드되는 javascript 프로세스입니까? –
@ Rafael - 나는 그것이 느린 과정 인 것처럼 느낍니다. 예를 들어 폴더를 클릭하면 사진 디스플레이를로드하기 위해 사진을 하나씩로드해야합니다. 사진이 바로 거기에서 팝니다. 그래서 나는 느린 사진로드 진행을보고있는 것처럼 아니지만 ... 다시, 100 장의 사진을로드 할 때까지 기다리고 있습니다. 각각 약 1 초가 걸리는 것이 바람직하지 않습니다. 나는 약간 다른 접근 방식으로, 그리고 대시 보드에서 고려할 것입니다.PHP 파일, 몇 백개의 빈 이미지 태그를 만든 다음 js를 통해 src 속성을 채 웁니다. 그러나 이것이 최선의 방법인지는 잘 모르겠습니다. –
코드가 너무 무거워서 속도가 느려지는 자바 스크립트가 아니라고 생각합니다. 내 대답을 확인하십시오. –