사전로드 이미지 나는 다음과 같은 testpage를 만들어 이미지

Question

의 지배적 인 색상을 얻을 수 있습니다. 안타깝게도 이미지가 완전히로드되지 않는 한 색상을 계산할 수 없습니다 (자바 스크립트 경고 참조). 그러면 애니메이션이 작동하지 않습니다. 페이지를 다시로드하면 이미지가 브라우저에서 캐시되고 모든 것이 charme처럼 작동합니다.

관련 코드는 다음과 같습니다

$('.bg').each(function(index) { 
     var url = $(this).data('background-image'); 
     img = new Image(); 
     img.src = url; 
     averageColours[url] = getAverageColourAsRGB(img); 
     $(this).css('background-image', 'url(' + url + ')'); 
    }); 

    $('.bg').waypoint(function() { 
     var url = $(this).data('background-image'); 
     var colour = getPreloadedAverageColourAsRGB(url); 
     console.log(url + ' ' + colour.r + ',' + colour.g + ',' + colour.b); 
     $('body').data('bgColour', 'rgb(' + colour.r + ',' + colour.g + ',' + colour.b + ')'); 
     $('body').animate({backgroundColor: $('body').data('bgColour')}); 
    }, { offset: 0 }); 

어떻게 완전히로드 된 이미지까지 바인딩 웨이 포인트를 연기 할 수 있습니까?

Answer 1

$.load을 사용하여이 작업을 수행하는 몇 가지 해킹 방법이 있지만 지금은 가장 좋은 방법은 imagesloaded입니다.

당신은 다음과 같이 할 수

:

$('.my-content-class').imagesLoaded(function() { 
    // ... your code here 
});