且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

javascript自定义对象和图片加载

更新时间:2022-01-12 09:56:22

图像异步加载,因此,成功加载图像后,您必须触发绘图操作.使用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.