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

Question

我创建了以下测试页: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 });

如何将航点绑定(bind)推迟到图像完全加载后？

Answer 1

使用 $.load 有一些 hacky 方法可以做到这一点, 但目前我发现的最佳方法是使用 imagesloaded .

然后你可以这样做:

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