Jump to content
Search Community

onComplete, Javascript Objects and Loading Images

upressplay test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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();
 }
}

};

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...