PHP/AJAX- 사전로드 이미지에 대한 모범 사례

StackOverflow https://stackoverflow.com/questions/257550

문제

Flickr Photostream 기능과 매우 유사한 스크립트를 작성했습니다. 서로 옆에 두 개의 썸네일이 있고, 다음 또는 이전을 클릭하면 다음 (또는 이전) 두 이미지가 미끄러 져 들어갑니다. cool!

현재 페이지가로드되면 두 이미지가로드됩니다. NXT / PRV가 처음으로 사용되면 다음 두 이미지 또는 이전 두 이미지는 AJAX를 통해로드되며, 첫 번째 이미지의 ID는 URL에 전달되고 두 개의 새로운 이미지에 대한 HTML이 AJAX를 통해 반환되고 표시됩니다.

충분히 간단하지만, 느린 연결 또는 서버로드로 생각하게 만들었습니다. 두 이미지가 두 이미지로 부하되었지만 비교적 작은 썸네일은 여전히로드하는 데 시간이 걸릴 수 있지만 슬라이딩 팬이있는 좋은 것은 숨겨진 데이터가 있다는 사실입니다. 하중 지연없이 빠르고 부드럽게 미끄러 져 들어갑니다.

그래서 나는 성능과 좋은 관점에서 어떤 옵션이 가장 좋은지 궁금했습니다. 이것이 제가 지금 생각할 수있는 것입니다.

1, JSON을 통해 각 이미지 세트를 호출하십시오 (빠르겠다고 가정합니까?)

2, 가능한 모든 이미지를 JSON 파일에로드하고 브라우저는 여전히 이미지를로드해야하지만 이러한 방식으로 세부 사항을 가져옵니다. 또한 때로는 4 개의 이미지가있을 수 있으며 다른 시간에는 최대 1000이있을 수 있습니다!

3, PHP를 통해 10 개의 이미지를 JSON 또는 기타 파일에로드하고 10 개의 이미지를 모두 보여주지 않는 8 개를 숨기고 항상 중간을 보여줍니다. 문제는 누군가가 클릭 할 때마다 파일이 첫 번째 및 마지막 이미지를 다시로드해야한다는 것입니다.하지만 중간 이미지가 모두 브라우저를 통해 캐시되었다고 생각하지만 여전히 시간이 걸립니다. 그러나 여전히 로딩 시간이 있습니다.

4, 모든 이미지 세부 사항이있는 JSON 이미지를 가질 수 있고 (숫자에 관계없이) 위의 No 3을 사용하여 해당 이미지 중 10 개를로드하여 AJAX를 사용하여 10 줄만 읽고 마지막의 포인터를 유지할 수 있습니까? 하나는 읽은 것이므로 JSON 파일을 빠르게로드하고 짧은 새로 고침 및 이미지 양쪽 이미지를 브라우저를 통해 캐시합니다 !!

분명하게, 당신이 이것을 어떻게 처리 할 것인지에 대한 제안이 있습니까?

도움이 되었습니까?

해결책

JavaScript에서 이미지를 예압하려면 Ajax 또는 JSON과 같은 소리를 낼 필요가 없습니다. 당신이 필요한 것은 이것입니다 :

var img = new Image();
img.src = "http://example.com/new/image.jpg";

브라우저는 어디에도 표시되지 않더라도 배경에 이미지를 매우 행복하게로드합니다. 그런 다음 업데이트 할 때 src 다른 (표시된) 이미지 태그의 필드 인 브라우저는 이미 이미로드 된 이미지의 일부를 표시합니다 (희망적으로).

다른 팁

Ajax를 통해 JSON을 가져 오면 속도가 느려집니다.

인라인 JSON을 사용하고 JavaScript를 생성하는 것이 좋습니다. 

 <?php 
       $images = array( "foo.jpg","bar.jpg" ); 
 ?>
 <script type="text/javascript">
   jQuery(function($){
       var images = ( <?php echo json_encode($images); ?> ); 
       /* Creating A Hidden box to preload the images into */
       var imgbox = document.createElement("div"); 
       $(imgbox).css({display: 'none'});
       /* Possible Alternative trick */
       /* $(imgbox).css({height:1px; width: 1px; overflow: hidden;}); */
       $('body').append(imgbox);

       $.each( images , function( ind, item ) 
       {
          #Injecting images into the bottom hidden div. 
          var img = document.createElement("img"); 
          $(img).src("/some/prefix/" + item ); 
          $(imgbox).append(img);
       });
    }); 
 </script>

당신이 원하는 경우 동시에 더 많은 수의 리소스를 예압하면 약간의 Ajax가 문제를 해결할 수 있습니다. 캐싱 헤더가 브라우저가 다음 요청에서 리소스를 사용할 수 있도록하는지 확인하십시오. 다음 예에서는 최대 4 개의 리소스를 동시에로드합니다.

<script>
var urls = [
  "a.png",
  "b.png",
  "c.png",
  "d.png",
  "e.png",
  "f.png"
];

var currentStep = 0;
function loadResources()
{
  if(currentStep<urls.length){
  var url = urls[currentStep];
  var req = GetXmlHttpObject();
  update('loading ' + url);
  req.open("GET", url, true);
  req.onreadystatechange = getUpdateState(req, url);
  req.send(null);
} else {
  window.location = 'done.htm';
}
}

function getUpdateState(req, url) {
  return function() {
    var state = req.readyState;
    if (state != 4) { return; }
    req = null;
    setTimeout('loadResources()', 0);
  }
}
</script>

<!-- This will queue up to four concurrent requests.  Modern browsers will request up to eight images at time  -->
<body onload="javascript: loadResources(); loadResources(); loadResources(); loadResources();">

텍스트를 사용하고 텍스트를 그림 코드로 바꾸지 않는 이유는 무엇입니까 (PHP에서는 최대 500 장의 사진과 함께 정말 좋습니다)?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top