Question

我创建了一个简单的图库，并希望根据活动图像的颜色更改文档的颜色。要做到这一点，我正在使用colorThief.js

我的问题是我正在为所有非活动图像使用黑白版本的图像，并且每次点击都会使用彩色版本重新加载活动图像。执行此更改后，switchColors函数停止正常工作（仅在单击已经激活的图像时才有效。我认为这与图像加载有关，但尝试使用带回调的 .load（）来修复它并不起作用。

这是我的剧本：

$(document).ready(function(){
var colorThief = new ColorThief();
var currentId = 0;
var id;
var stageMargin = $('body').width()/2;
    stageMargin -= $('#0>img').width()/2;
$('#stage').css('margin-left', stageMargin+'px');

var switchColors = function(image) {
    var color = colorThief.getColor(image, 5);
    var palette = colorThief.getPalette(image, 10, 5);

    var num = Math.floor((Math.random()*8)+1)
    randomColor = palette[num];

    randomColor = $.xcolor.complementary(randomColor).getArray();

    perform(color, randomColor);
};

var perform = function(color, randomColor){
    $('h1').css('color', 'rgb('+randomColor[0]+','+randomColor[1]+','+randomColor[2]+')');
    $('h2').css('color', 'rgb('+randomColor[0]+','+randomColor[1]+','+randomColor[2]+')');
    $('strong').css('color', 'rgb('+randomColor[0]+','+randomColor[1]+','+randomColor[2]+')');

    $('body').css('background-color', 'rgb('+color[0]+','+color[1]+','+color[2]+')');
};

var organizeStage = function(id){
    var $this;

    $('div.piece').each(function(){
        $this = $(this);

        if($this.hasClass('center')){
            $this.children('img').attr('src', bank[$this.attr('id')].image_bw);
        }

        if($this.attr('id')<id){
            $this.removeClass('right center');
            $this.addClass('left');
        }
        else if($this.attr('id')>id){
            $this.removeClass('left center');
            $this.addClass('right'); 
        }
        else{
            $this.removeClass('right left');
            $this .addClass('center');

            $this.children('img').attr('src', bank[$this.attr('id')].image);
            $('h2')[0].innerHTML = '<strong style="'+$('#tester').attr('style')+'">'+bank[$this.attr('id')].titleText+'</strong> ~ '+bank[$this.attr('id')].typeText;
        }
    });

    stageMargin = $('body').width()/2;
    stageMargin -= $('#'+id+'>img').width()/2;
    stageMargin -= 100*id;
    $('#stage').css('margin-left', stageMargin+'px');
};

$('.piece img').on('click', function(event){
    id = $(this).parent().attr('id');

    if(id != currentId){
        organizeStage(id);
        currentId = id;
    }

    switchColors($('.piece.center img')[0]);

});

这是画廊HTML的结构：

<section id="stage">
    <div id="0" class="piece center">
        <img src="images/0_bw.jpg">
    </div>
    <div id="1" class="piece right">
        <img src="images/1_bw.jpg">
    </div>
            . 
            .
            .
</section>

感谢您的帮助！

Answer 1

我为此感到抱歉.. 我再次尝试使用load（）并且工作正常。我猜我上次没有正确使用$（这个）。

Dharmang-感谢您的时间！

将jquery操作与图像加载同步

1 个答案: