onComplete, Javascript Objects and Loading Images

[upressplay]

So, I'm creating an Image Gallery. Clicking on buttons calls the "change_section" function, passing it the hires image id. I want to fade out the current image, load the new image, than fade it on the screen. But, for some reason when it losing track of the "this.hires" array that contains the image url, width, height and id. I think it's calling an undefined "Gallery" javascript object. Any insight would be appreciated.

 

Gallery.prototype.change_section = function(_id) {

 this.new_section = _id;

//// Started with
TweenMax.to(this, .5, {hires_alpha:0, overwrite:2, onUpdate:reDrawMain, onComplete:this.check_hires});

  ///I've tried this	
var obj = this;
  TweenMax.to(obj, .5, {hires_alpha:0, overwrite:2, onUpdate:reDrawMain, onComplete:obj.check_hires});


/// Calling just this works, and still sees the "this.hires" array in the Gallery object. So, I don't think it's my logic, but rather I'm not referencing the right javascript object with the onComplete call.

this.check_hires();
};

Gallery.prototype.check_hires = function() {
var i;
for (i=0;i<this.hires.length;i++)
{	  
 if(this.hires[i].id == this.new_section) {
  if(!this.hires[i].loaded && !this.hires[i].loading) {  
this.load_hires();
  } else {
this.active_section = this.new_section;
		 this.open_hires();
  }


 }
}
};

 

The code below is for reference. Maybe I have conflicting calls to TweenMax or something.

 

Gallery.prototype.open_hires = function() {
TweenLite.to(this, .5, {delay:.5, hires_alpha:1, overwrite:2, onUpdate:reDrawMain});
};
Gallery.prototype.load_hires = function() {

trace("Gallery load_img")
var obj = this;

var i;
var s;

for (i=0;i<this.hires.length;i++)
{	  
 if(this.hires[i].id == this.new_section) {  
  var hires_img = new Image();
  this.hires[i].obj = hires_img;
  hires_img.id = this.hires[i].id;  
  hires_img.onload = function () {  
obj.hires_loaded(this.id);
  }
  this.hires[i].loading = true;
  hires_img.src = this.hires[i].img;

 }	

}
};
Gallery.prototype.hires_loaded = function(_id) {

var i;

for (i=0;i<this.hires.length;i++)
{	  
 if(this.hires[i].id == _id) {
  this.hires[i].loaded = true;
  this.active_section = _id;
  this.open_hires();
 }
}

};

[kipp]

I think what's happening is that your function calls are forgetting what 'this' refers to. Depending on where your function gets called, it can get goofed up easily. Luckily TweenLite has a way to fix the problem. Try adding onUpdateScope and onCompleteScope properties to your tweens like so:

 

TweenMax.to(this, .5, {hires_alpha:0, overwrite:2, onUpdate:reDrawMain, onComplete:this.check_hires, onCompleteScope:this});

 

Hopefully that does the trick!

-Kipp

[GreenSock]

Scope can be a little tricky in JavaScript - that's why TweenLite and TweenMax allow you to specifically define the scope with onCompleteScope, onUpdateScope, onStartScope, etc. For example:

 

//specifically define the onCompleteScope...
TweenMax.to(this, .5, {hires_alpha:0, onUpdate:reDrawMain, onComplete:this.check_hires, onCompleteScope:this});

 

And for those not familiar with what we mean by "scope", it's what "this" refers to within the function that gets called.

 

Update: Kipp and I posted simultaneously Thanks for chiming in, Kipp! Didn't mean to unnecessarily add my 2 cents after you already nailed the answer.

[upressplay]

Thanks dudes! Worked like a charm!