预先载入图像与jQuery获得图像

Question

的主色我创建了以下testpage：http://methodus.de/wp/

它让每个博客文章的图像的主色和向下滚动页面时将它们用于动画。不幸的是，只要图像未被完全加载就无法计算颜色（请参阅javascript警报）。那么动画不起作用。当我重新加载页面时，由浏览器缓存的图像，以及一切像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

有一些hacky的方式使用$.load来做到这一点，但目前我发现的最好的方法是使用imagesloaded。

然后，您可以这样做：

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