Question

i am having trouble with image loading and triggering with safari/mobile safari. i have a custom object that draws on a canvas but needs to wait until an object image property has loaded because it uses the dimensions of the image when drawing. the below code works fine on ff but fails in safari:

function canvasSlider(){
    this.slideImg=new Image();
    this.slideImg.src="images/back_button.png";
    this.somevalue=55;
}
canvasSlider.prototype.init = function (){
    alert(this.slideImg.complete + ', ' + this.slideImg.height+', ' + this.somevalue);
}
var myObj = new canvasSlider();
myObj.init();

in safari this will always return false for this.slideImg.complete

How can i use this.slideImg.onload=somefunction(); and always ensure the canvasSlider object is passed?

function canvasSlider(){
this.slideImg=new Image();
this.slideImg.onload=somefunction(this);
this.slideImg.src="images/back_button.png";
this.somevalue=55;
}
function somefunction(obj){
alert(obj.slideImg.complete+', '+obj.slideImg.src);
}
var myObj = new canvasSlider()

this doesn’t work. any ideas?
Thanks

Answer 1

Images load asynchronously so you have to trigger the drawing operation when the image is successfully loaded. You were on the right path with onload. You can do that like this:

function canvasSlider(readyFunc){
    var self = this;
    this.slideImg=new Image();
    this.slideImg.onload = function() {
        self.init();
        if (readyFunc) {
            readyFunc.call(self);
        }
    };
    this.somevalue=55;
    // The last thing you should do in the constructor is set the .src value
    // That's because if the image is in the cache, some browsers will trigger
    // onload immediately when you set .src and we want the canvasSlider object 
    // to be fully formed when init() and readyFunc() are called.
    this.slideImg.src="images/back_button.png";
}
canvasSlider.prototype.init = function (){
    alert(this.slideImg.complete + ', ' + this.slideImg.height+', ' + this.somevalue);
}
var myObj = new canvasSlider(function() {
    // The slider is ready with the image loaded here 
    // and .init() has already been called.
    // "this" right here is the canvasSlider object
    // you can do anything else you wanted to do once the image was loaded
});
// The image is not necessarily loaded here.  
// You have to put anything that relies on the image being loaded in the 
// above callback to assure it is not executed until the image is loaded.

Note: when testing your code, some browsers will fire onload immediately if the image is in the browser cache. You should test both ways (with the image in the browser cache and without the image in the browser cache) to make sure that both cases are working properly. It is common for developers to think everything works fine (because the image is in their browser cache) and then it doesn’t work for the very next user who tries it.