Question

它获得每篇博文的图像的主色，并在向下滚动页面时将它们用于动画。不幸的是，只要图像没有完全加载，就无法计算颜色（请参阅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
});

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

1 个答案: