javascript自定义对象和图片加载 [英] javascript custom object and image onload

问题描述

我在使用Safari/移动Safari进行图像加载和触发时遇到麻烦.我有一个在画布上绘制的自定义对象，但是需要等到对象图像属性加载后才能使用，因为它在绘制时会使用图像的尺寸.下面的代码在ff上工作正常，但在safari中失败:

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

在野生动物园中，对于this.slideImg.complete

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

我如何使用this.slideImg.onload = somefunction();并始终确保通过canvasSlider对象?

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

推荐答案

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

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.

注意:在测试代码时，如果图像在浏览器缓存中，则某些浏览器将立即触发onload.您应该同时测试两种方式(使用浏览器缓存中的图像，而不使用浏览器缓存中的图像)，以确保两种情况均能正常工作.开发人员通常会认为一切正常(因为该图像在其浏览器缓存中)，然后对下一个尝试使用它的用户无效.

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.

这篇关于javascript自定义对象和图片加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！