javascript 自定义对象和图像加载

Question

我在使用 Safari/mobile Safari 加载和触发图像时遇到问题。我有一个在画布上绘制的自定义对象，但需要等待对象图像属性加载，因为它在绘制时使用图像的尺寸。下面的代码在 ff 上工作正常，但在 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();

在 safari 中， this.slideImg.complete 总是返回 false

我如何使用 this.slideImg.onload=somefunction();并始终确保canvasSlider对象被传递？

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

这是行不通的。有什么想法吗？ 谢谢

Answer 1

图像加载是异步的，因此您必须在图像加载成功后触发绘制操作。您的 onload 走在正确的道路上。您可以这样做：

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.

注意：在测试代码时，如果图像位于浏览器缓存中，某些浏览器将立即触发 onload。您应该测试两种方式（浏览器缓存中有图像和浏览器缓存中没有图像），以确保两种情况都能正常工作。开发人员通常认为一切正常（因为图像位于浏览器缓存中），但对于下一个尝试它的用户来说却不起作用。