첫 번째로드시 이미지를 바꿀 때 캐싱 문제가 발생합니다.

페이지를 처음로드 할 때 캐시를 지울 때 첫 번째로드시 이미지가 표시되지 않는 캐싱 문제가 있습니다. 저는 이미지를 제공하는 외부 미디어 회사와 협력하고 있습니다. 한 번로드 된 이미지의 소스를 바꾸려면 콜백 함수 안에 아래 코드를 작성했습니다.첫 번째로드시 이미지를 바꿀 때 캐싱 문제가 발생합니다.

이 정보가 정확합니까?

$('img').each(function(){ 

    var img = $(this); 

    // AJAX HEAD request to check the larger image file has loaded 
    var img_src_large = img.attr("src").replace("/viewfinder.jpg", "_SMALL.jpg"); 

    $.ajax({ 
     url: img_src_large, 
     type:'HEAD', 
     error: 
      function(){ 
       img.fadeIn("fast"); 
      }, 
     success: 
      function(){ 
       img.attr("src",img_src_large).fadeIn("fast"); 
      } 
    }); 

});

출처

2011-07-03 John Magnolia

나는이 블로그 게시물을 보았지만 제대로 작동하지는 못했습니다. http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm#comments_16704 –

방금 두 번 찍었습니다. 속임수를 쓰려고합니다. 브라우저가 아약스 요청을 통해 이미지를 읽음으로써 그것을 캐싱합니다. –

AJAX를 사용하는 것은 작동시키기 위해 노력한 예일뿐입니다. 내가하려는 것은 replace()를 사용하여 이미지 소스를 변경하는 것입니다. 처음로드가 아닌데도 이미지가 브라우저 캐시에 있으면 제대로 작동합니다. –

캐싱으로 인해 이미로드 된 이미지에서 "로드"이벤트를 강제 실행하여이 작업을 수행 할 수 있습니다. fadeIn 부분을 원하는 로직으로 바꿀 수 있습니다.

$('img').hide().one("load",function(){ 
    $(this).fadeIn(500); 
}).each(function(){ 
    if(this.complete) $(this).trigger("load"); 
});

출처

2013-03-23 17:18:36

나는이 문제를 img load로 해결했다. 아마도 이것은 같은 상황에서 누군가를 도울 것이다.

// Wrap Thumb Views 
$('#rfxViews img').each(function(){ 

    var img = $(this); // cache selected to variable 

    // Replace the small swatch images 
    var img_src_large = img.attr("src").replace("/viewfinder.jpg", "_SMALL.jpg"); 

    // Set empty source until image has loaded below 
    img.attr("src",""); 

    img.attr('src', img_src_large).hide().load(function(){ 
     $(this).show() 
    }) 

});

출처

2011-07-04 19:47:33

첫 번째로드시 이미지를 바꿀 때 캐싱 문제가 발생합니다.

답변

관련 문제