JQuery append()를 추가 할 때 이미지를 다시로드하는 것을 방지합니다.

일부 이미지 URL을 포함하여 일부 JSON을 반환하는 AJAX 호출이 있습니다. DOM에 이미지를 추가하고 싶지만 동일한 이미지를 반복해서 가져오고 대역폭 비용을 높이고 싶지는 않습니다. 브라우저가 기본적으로 이러한 이미지를 캐싱하지 않습니다. JQuery로 img 요소를 만들고 추가하면 브라우저가 이미지를 요청할 때마다 이미지를 요청합니다.JQuery append()를 추가 할 때 이미지를 다시로드하는 것을 방지합니다.

그래서 난 그렇게 같은 숨겨진 사업부의 형태로 캐시를 추가 :

<div id="imageCache" style="display: none;"></div>

하고상의 imageKey가있을 수 있습니다 서버에서 반환 된 객체 JSON을 통해 반복 할 때 다음 JQuery와에 이런 짓을 :

if (post.imageKey) { 
    var cachedImage = $("#imageCache ." + post.imageKey); 

    if (cachedImage.length) { 
     var newImage = $(cachedImage).clone(); 
     $("#" + post.key).append(newImage); 
    } 
    else {     
     var newImage = $("<img src='/image?key=" + post.imageKey + "' alt='" + post.title + "' class='offeredPost " + post.imageKey + "'/>"); 
     $("#" + post.key).append(newImage); 

     cachedImage = $(newImage).clone(); 
     $("#imageCache").append(cachedImage); 
    } 
}

하지만 기쁨은 없습니다. 복제 된 이미지가 DOM에 추가되지만 JS가 페이지를 완료하자마자 브라우저 (Chrome)가 이미지에 대한 새로운 요청을합니다.

아이디어가 있으십니까? 감사.

출처

2012-01-06 Eliot

SRC에서 쿼리 문자열을 사용하고 있기 때문에 브라우저가 이미지를 캐싱하지 못하고 있습니다. 이미지 대신 고정 URL을 사용할 수 있습니까? – Blazemonger

@ mblase75 쿼리 문자열이 변경된 경우에만 해당됩니다. 매번 다시로드하도록 강제하는 URL 끝에 임의의 숫자를 추가하는 오래된 트릭과 같습니다. 번호가 다르므로 작동합니다. – Archer

@Archer 감사합니다. OP의'post.imageKey'가 매번 바뀌지 않았 음을 알기에 충분한 정보가 없었습니다. 나는 그를 고려하기 위해 그것을 버릴 것이라고 생각했다. – Blazemonger

div의 너비와 높이를 그림의 너비와 높이로 설정하고 background 속성을 사용하여 그림 url ('myImage.jpg')을로드합니다. no-repeat을 사용하면 div가 그림보다 큰 경우에 그림이 반복되지 않습니다.

출처

2012-01-06 14:18:35

+1 그리고 좋은 트릭은'background-position : center center;'배경을 항상 컨테이너의 중앙에두기 위해서입니다. –

감사합니다. 이것은 작동하는 것처럼 보입니다. 그러나 이미지를로드하기 전에 이미지의 희미한 부분을 알고 있어야합니다. 약간 까다 롭습니다. 서버 측에 뭔가 추가하여 AJAX 응답에 전달합니다. – Eliot

은 그 간단한 해결책을 생각할 수 없지만 이미지를 변경할 때마다 div의 크기를 동적으로 설정할 수 있습니다. 아약스 호출을 사용하여 이미지의 크기를 가져옵니다 (PHP GD 라이브러리에는 getimagesize()가 있습니다. http://www.php.net/manual/en/function.getimagesize.php 참조) –

JQuery append()를 추가 할 때 이미지를 다시로드하는 것을 방지합니다.

답변

관련 문제