使用JQuery预加载图像以获得图像的主色

我创建了以下测试页面： http ：//methodus.de/wp/

它获得每篇博文的图像的主色，并在向下滚动页面时将它们用于动画。 不幸的是，只要图像没有完全加载，就无法计算颜色（请参阅javascript警报）。 那时动画不起作用。 当我重新加载页面时，浏览器缓存的图像和一切都像魅力一样。

相关代码是：

$('.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有一些hacky方法可以做到这一点，但目前我发现的最佳方法是使用imagesloaded 。

然后你可以这样做：

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